javascript - 当尝试在鼠标按下时选择所有对象时，对象会自动移动位置(Fabric.JS)

Question

当我使用按钮选择所有对象时，我可以很好地移动所有对象，并且它们都保持在原位。但是，如果我想在单击 Canvas 上的对象时触发事件，则它不会按预期工作。

这是一个 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();

}

当我通过单击按钮激活它时，我可以移动 Canvas 上的所有对象，并且它们也不会在单击时移动位置。

如果我通过以下方式激活它；

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