如何在 Fabric.js 中处理组内单个对象上的事件？

Question

假设我有 3 个圈子并将它们添加到一个组中。

var circle1 = new fabric.Circle({
  radius: 50,
  fill: 'red',
  left: 0
});
var circle2 = new fabric.Circle({
  radius: 50,
  fill: 'green',
  left: 100
});
var circle3 = new fabric.Circle({
  radius: 50,
  fill: 'blue',
  left: 200
});

var group = new fabric.Group([ circle1, circle2, circle3 ], {
  left: 200,
  top: 100
});

canvas.add(group);

我怎样才能处理鼠标事件，比如说，circle1？

或者换句话说，我如何知道鼠标点击了组中的哪些对象？

Answer 1

当您将对象组合在一起时，您使组对象表现为一个对象，因此它可以旋转、移动、缩放，它像任何其他单个对象一样监听事件。 您不能仅仅因为现在所有的对象都只是一个对象，就可以监听单个对象上的任何事件。

当然，组对象具有项目方法 item(index)、getObjects()，因此您可以获取单个对象并获取/更新它们的属性。

1. 自定义解决方案可能是：

   1. 获取鼠标：按下事件
   2. 获取指针位置
   3. 通读组对象的所有_objects
   4. 比较鼠标指针的位置和activeObj._objects[item]的位置
   5. 如果它适合你已经找到了子对象

像这样的东西：

canvas.observe('mouse:down', function (options)
{
    pos = canvas.getPointer(options.e);
    console.log("POSITION"+pos);
        activeObj = canvas.getActiveObject();
        if (Math.abs(pos.x - activeObj.left) < 10 && Math.abs(pos.y - activeObj.top) < 30 && Math.abs(pos.y - activeObj.top) > 10) {
            console.log("connector selected");            
        }    
});

如果您想看一下，请在此处针对该问题进行另一个讨论： https ://github.com/kangax/fabric.js/issues/485

希望有帮助，祝你好运

Answer 2

当事件触发时，您可以通过画布侦听器回调检查目标对象，我不确定该对象是否具有形状类型的属性。 否则，您可以在添加圆圈时分配一个属性，说明它是一个圆圈，然后通过事件将其拾取。

canvas.on('mouse:up', function(e) {
  console.log(e.target); // should contain info on the clicked object
});

Answer 3

  circle2.on('mouseup', function(event) {
    console.log(`circle2 mouseup`);
  });