javascript - Fabricjs - 如何在不释放鼠标按钮的情况下取消选择一个对象并选择一个组

Question

我在 Canvas 上有 3 个织物对象，一个矩形和文本被分组为 1 个对象，然后我动态创建一个多边形，并在对象上重绘它:在组对象和另一个矩形之间移动。它们形成了一个看起来像“语音气泡”的东西，其中组和矩形(指针)都是可移动的。

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

到目前为止，我将项目很好地组合在一起，但只有选择多边形，然后释放鼠标按钮，然后再次单击该组，才能移动所有项目，按住鼠标并移动组。

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

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

到目前为止我拥有的原型(prototype) 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/