Question

我在画布上有3个布料对象，矩形和文本被分组为1个对象，然后我动态创建一个多边形，并在对象上重绘：在组对象和另一个矩形之间移动。这些形成了一个看似“气泡”的东西，其中组和矩形（指针）都是可移动的。

我想要实现的是：用鼠标单击多边形时，可以在按住鼠标的同时移动所有3个对象。

到目前为止，我将这些项目组合在一起很好，但是如果选择多边形，则只能移动所有项目，然后释放鼠标按钮，然后再次单击组< / em>，按住鼠标并移动组。

我尝试了以下画布方法，认为他们可能会在点击时“取消选择”多边形，但它们都不会起作用。

canvas.deactivateAllWithDispatch(); canvas.deactivateAll(); canvas.discardActiveObject();

到目前为止，原型的Jsfiddle就在这里：

http://jsfiddle.net/beewayne/3y2x3vty/

Answer 1

我搞砸了一下，我得到的最好的是手动将对象和组一起移动，直到用户第一次放开鼠标。

我将mousedown监听器修改为更像这样：

  shape.on('mousedown', function(evt) {

    var objs = canvas.getObjects();

    var group = new fabric.Group(objs, {status: 'moving'});

    // Relevant code
    var originalX = shape.left,
        originalY = shape.top,
        mouseX = evt.e.pageX,
        mouseY = evt.e.pageY;

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

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

  // clean up the listener
  shape.on('mouseup', function(evt) {
    canvas.off('object:moving');
  });

我使用了鼠标偏移，因为将对象添加到组中会使其“跳跃”＃34;一点。此外，我不断将对象设置为相同的位置，以便它不会在组内移动。

http://jsfiddle.net/kqfswu4b/1/

Fabricjs - 如何取消选择对象并选择组而不释放鼠标按钮

1 个答案: