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

当尝试选择mousedown上的所有对象时，对象会自动移动位置（Fabric.JS）

1 个答案: