javascript - 如何删除 Fabric 中之前添加的矩形对象？

Question

鼠标单击事件时，一个矩形会添加到 Canvas 中:

    canvas.on({
        'mouse:down': function(options) {
            canvas.add(new fabric.Rect({
                left: options.e.clientX,
                top: options.e.clientY,
                fill: 'red',
                width: 20,
                height: 20
            }));
        }
    });

如果我单击其他地方，则会绘制第二个矩形，依此类推。我希望对于每个新的鼠标单击事件删除先前的矩形。在这种情况下我不能使用 animate() ，因为在我的应用程序中将绘制很多矩形，我需要在新位置重绘新矩形，而不是移动它们中的每一个。

在 native Canvas 中，我可以使用 clearRect() 清除整个 Canvas 并在新位置重新绘制一个新矩形。使用 Fabric.js 时如何做类似的事情？

Answer 1

您只能创建一个矩形对象，并为后续的鼠标按下事件更改其left 和top 位置。

演示

var canvas = new fabric.Canvas('canvas',{selection:false});
var rect = new fabric.Rect({
  fill: 'red',
  width: 20,
  height: 20,
  visible:false
});

canvas.add(rect);

canvas.on('mouse:down', function(options) {
  var pointer = canvas.getPointer(options.e);
  rect.set({
    left: pointer.x,
    top: pointer.y,
    visible:true
  });
  canvas.renderAll();
});

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>