Fabricjs：在 canvas 上添加和选择对象

Question

这就是我想要达到的目标 in this jsfiddle:

如果用户点击 canvas，则会添加一个矩形
如果用户单击添加的矩形，他们可以拖动它或调整它的大小

问题是，当用户点击指向 select 的矩形时，它也会触发对 canvas 的点击，因此添加了另一个矩形。如何防止这种情况发生？

HTML

<canvas id="c" width="400" height="300"></canvas>

Javascript

var canvas = new fabric.Canvas('c');
canvas.on('mouse:down', function(options) {

    var rect = new fabric.Rect({
       left: options.e.clientX,
       top: options.e.clientY,
       width: 60,
       height: 60,
       fill: 'rgba(255,0,0,0.5)',
   });

   canvas.add(rect);

});

Answer 1

这是我修复它的方法，如果用户单击 canvas，options.target 为空，如果用户单击对象，则不为空：

canvas.on('mouse:down', function(options) {

    if (options.target)
       return;

    var rect = new fabric.Rect({
        left: options.e.clientX,
        top: options.e.clientY,
        width: 60,
        height: 60,
        fill: 'rgba(255,0,0,0.5)',
    });
    canvas.add(rect);
});

Fabricjs：在 canvas 上添加和选择对象

Fabricjs: Adding and selecting objects on canvas

fabricjs