Image setSrc（）之后fabricjs鼠标事件失败

使用setSrc（）将选定画布图像更改为较大图像时，在位于原始较小图像xy边界之外的新图像区域上无法识别鼠标事件

相反，当将选定的画布图像更改为较小的图像时，将在新图像外部直至原始较大图像的xy边界的区域上识别鼠标事件

在这两种情况下，一旦新图像接收到鼠标点击，事情就会恢复正常，整个图像接收到的鼠标事件不会更多，也不会更少。此外，控件显示在正确的位置，但如上所述不可单击

是否有方法纠正此行为，以便只有完整的可见图像才能接收鼠标事件

HTML

---

在新映像上调用setCoords（）可以纠正问题。

您使用的

setCoords（）

是正确的，但是将其和

canvas.renderal（）

放在

setrc（）

回调中，这样您就可以删除

setTimeout（）

函数调用：

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

$(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); 
    });
});

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