Question

我想要两个事件处理程序。一个是当我基于mouseX鼠标点击画布时，一个图像出现在某个位置（对齐网格）。

第二种是当我点击出现的同一图像时，我希望删除此图像。

第一个事件处理程序已实现且运行良好，第二个事件处理程序无法正常工作如何实现此目的？

另外我想当我想删除我的图像时，第一个事件处理程序会触发并添加一个新图像，这是一个恶性循环。

这是我的addImage()功能：

function addImage(spaceX, spaceY, mouseX, mouseY, sizeX, sizeY, url) {
  //spaceX/Y is the size of my grid
  //mouseX/Y are the coordinates of my mouse
  //sizeX/Y is the size of my canvas
  //url is the url of my image.
  fabric.Image.fromURL(url, function(oImg) {
    var divX = sizeX / spaceX;
    var resX = mouseX / sizeX * divX;
    var indW = Math.trunc(resX); //X index in the grid
    var divY = sizeY / spaceY;
    var resY = mouseY / sizeY * divY;
    var indH = Math.trunc(resY); //Y index in the grid
    oImg.top = indH * spaceY;
    oImg.left = indW * spaceX;
    oImg.scaleToWidth(spaceX);
    oImg.scaleToHeight(spaceY);
    oImg.selectable = false;
    //this is my non-working function to remove my image.
    oImg.on('click', function() {
      canvas.getActiveObject().remove();
    })
    canvas.add(oImg);
  });
}

Answer 1

oImg.on('mousedown', function (){
  canvas.remove(this);
})

对象使用mousedown事件。

<强> 样本

＆＃13;

var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(oImg) {
    oImg.on('mousedown', function (){
      canvas.remove(this);
    })
  canvas.add(oImg);
});

＆＃13;

canvas{
 border:2px solid #000;
}

＆＃13;

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvas' width=500 height=400>

＆＃13;

如何通过在Fabricjs中单击图像来删除图像？

1 个答案: