尝试在 mousedown 上全选时对象自动移动位置（Fabric.JS）

Question

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

这是一个Plnk；

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

我用这个作为代码的 sn-p 来选择全部；

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