Fabricjs: Добавление и выбор объектов на холсте

Question

Это то, что я пытаюсь достичь in this jsfiddle:

• Если пользователь нажимает на холсте, то прямоугольник добавляется
• Если пользователь нажимает на 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 равно нулю, если пользователь нажал на холсте, а не ноль, если пользователь нажал на объект:

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