CODEWITHSUNDEEP
imagefabricjs
kamakalama
kamakalama

Reputation: 11

fabricjs mouse events fail after setSrc()

When changing a selected canvas image to a larger image using setSrc(), mouse events are not recognized on areas of the new image that lie outside of the xy boundaries of the original smaller image.

Conversely, when changing a selected canvas image to a smaller image, mouse events are recognized on areas outside of the new image up to the xy boundaries of the original larger image.

In either case, once the new image does receive a mouse click, things return to normal where the entire image receives mouse events, no more, no less. Also, the controls appear in the correct locations but are not clickable as stated above.

Is there a way to correct this behavior so only the complete visible image can receive mouse events?

http://jsfiddle.net/kamakalama/0ng18cas/10/

HTML

<body>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <button id="butt">Change Image</button>
    <canvas style="border:1px solid silver;" width=500 height=400 id="c"></canvas>
</body>

JavaScript

$(document).ready(function() { 

var canvas = new fabric.Canvas('c',{backgroundColor:"#ffffff"});
var bigImg="http://nonsuch30.com/yachtcards/images/cardbox-closed.jpg"
var smallImg="http://nonsuch30.com/yachtcards/images/woodcrafter-thumb.jpg"

    fabric.Image.fromURL(smallImg, function (img) {                        
    canvas.add(img);
    canvas.renderAll();
    img.setTransformMatrix([ 1, 0, 0, 1, 0, 0])
    canvas.setActiveObject(img)
    })

    $("#butt").click(function(){
    img = canvas.getActiveObject()

    if(img.getSrc()==smallImg){
    img.setSrc(bigImg)
    }else{
    img.setSrc(smallImg)
    }

    setTimeout(function(){
        canvas.renderAll()
        canvas.setActiveObject(img)
    }, 2000); 
    });
});

Upvotes: 1

Views: 771

Answers (2)

Tim Harker
Tim Harker

Reputation: 2417

You're correct in using setCoords(), but put that and canvas.renderAll() in the setSrc() callback so you can remove the setTimeout() function call:

if (img.getSrc() == smallImg) {
  img.setSrc(bigImg, function() {
    canvas.renderAll();
    img.setCoords();
  });
} else {
  img.setSrc(smallImg, function() {
    canvas.renderAll();
    img.setCoords();
  });
}

Upvotes: 1

kamakalama
kamakalama

Reputation: 11

Calling setCoords() on the new image corrects the problem.

Upvotes: 0

Related Questions