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

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

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

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