Объекты перемещают позицию автоматически при попытке выбрать все на mousedown (Fabric.JS)

Question

Когда я использую кнопку для выбора всех объектов, я могу перемещать все в порядке, и все это остается на месте. Однако, если я хочу запустить событие, когда я нажимаю объект на холсте, он не работает должным образом.

Адрес: Plnk;

http://plnkr.co/edit/iqn5QpBRe30eftoI1z8p?p=preview

Я использую это как фрагмент кода на SelectAll;

function selectAllCanvasObjects(){ 
var objs = canvas.getObjects().map(function(o) { 
    return o.set('active', true); 
}); 

var group = new fabric.Group(objs, { 
    originX: 'center', 
    originY: 'center' 
}); 

canvas._activeObject = null; 

canvas.setActiveGroup(group.setCoords()).renderAll(); 

} 

Когда я активировать его с помощью кнопки мыши, я в состоянии переместить все объекты на холсте все в порядке, и они также не двигаться позиции по щелчку.

Если я активирую его следующим образом;

triangle.on('mousedown', function(e){ 
    selectAllCanvasObjects(); 
}) 

Он не будет инициализировать перемещение всех объектов сразу.

Если я использую;

canvas.on('mouse:down', function(e){ 
    selectAllCanvasObjects(); 
}) 

Это сделает объекты автоматически прыгающими.

Мне интересно, есть ли способ, которым я могу использовать два предыдущих метода, поэтому функция ведет себя, как при нажатии?

Answer 1

Если я понимаю это право, я думаю, что некоторое время назад я ответил на довольно похожий вопрос: Fabricjs - how do I deselect an object and select a group without releasing the mouse button.

Я изменил ваш Plunkr в этом направлении (пример кода ниже): http://plnkr.co/edit/5FN5HYWNjU5I3sZO9ixI?p=preview. Надеюсь, это поможет вам.

triangle.on('mousedown', function(evt) { 
    canvas.deactivateAll(); 
    var objs = canvas.getObjects(); 

    var group = new fabric.Group(objs, { 
    status: 'moving' 
    }); 
    // Relevant code 
    var originalX = triangle.left, 
    originalY = triangle.top, 
    mouseX = evt.e.pageX, 
    mouseY = evt.e.pageY; 

    triangle.on('moving', function(evt) { 
    triangle.left = originalX; 
    triangle.top = originalY; 
    group.left += evt.e.pageX - mouseX; 
    group.top += evt.e.pageY - mouseY; 
    originalX = triangle.left; 
    originalY = triangle.top; 
    mouseX = evt.e.pageX; 
    mouseY = evt.e.pageY; 
    }); 

    triangle.on('mouseup', function() { 
    triangle.off('moving'); 
    }) 

    canvas.setActiveGroup(group.setCoords()).renderAll(); 
});