Question

在鼠标单击事件中，将在画布上添加一个矩形：

    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（），因为在我的应用程序中会有很多矩形被绘制，我需要在新的地方重新绘制新的矩形，而不是移动它们中的每一个。

在原生画布中，我可以使用clearRect()清除整个画布并在新位置重新绘制一个新矩形。使用Fabric.js时，我该怎么做呢？

Answer 1

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

<强> 样本

＆＃13;

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

＆＃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;

如何在Fabric中删除以前添加的矩形对象？

1 个答案: