Fabricjs：在画布上添加和选择对象答案

【问题标题】：Fabricjs: Adding and selecting objects on canvasFabricjs：在画布上添加和选择对象
【发布时间】：2015-03-21 04:47:13
【问题描述】：

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

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

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

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

});

【问题讨论】：

标签： fabricjs

【解决方案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);
});

【讨论】：