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

Question

我想要两个事件处理程序。 一个是当我基于 mouseX 和 mouseY 在 Canvas 上单击时，图像出现在特定位置(对齐网格)。

第二个是当我点击出现的同一张图片时，我希望删除该图片。

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

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

这是我的 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 事件。

演示

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

canvas{
 border:2px solid #000;
}

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