Question

这就是我想要实现的目标in this jsfiddle：

如果用户点击画布，则会添加一个rect
如果用户点击已添加的矩形，则可以拖动它或调整其大小

问题是，当用户点击矩形来选择它时，它还会触发画布上的单击，以便添加另一个rect。如何防止这种情况发生？

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

这是我修复它的方法，如果用户点击画布，options.target为null，如果用户点击了某个对象，则为null：

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：在画布上添加和选择对象

1 个答案: