Fabricjs - 如何在不释放鼠标按钮的情况下取消选择对象并选择组 [英] Fabricjs - how do I deselect an object and select a group without releasing the mouse button

问题描述

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

I have 3 fabric objects on the canvas, a rect and text are grouped as 1 object, then I dynamically create a polygon, and redraw it on object:moving between the group object and another rect. These form what looks like a "speech bubble", with the group and the rect (pointer) both being movable.

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

What I'd like to achieve is: when the polygon is clicked with the mouse, you can move all 3 objects while holding the mouse down.

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

So far what I have groups the items together fine, but you can only move all the items if you select the polygon, then release the mouse button, then click the group again, hold down the mouse and move the group.

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

I've tried the following canvas methods, thinking they might "deselect" the polygon on click, but none of them appear to work.

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

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

Jsfiddle of the prototype I have so far is here:

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

推荐答案

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

I messed around a little and the best I got is to manually move the object and the group together until the user lets up the mouse for the first time.

我修改了mousedown监听器看起来更像这样：

I modified the mousedown listener to look more like this:

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

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

I used the mouse offset, since adding the object to the group makes it "jump" a little. Also, I continuously set the object to the same position, so that it doesn't move within the group.

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

这篇关于Fabricjs - 如何在不释放鼠标按钮的情况下取消选择对象并选择组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！