如何在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);

我该如何仅处理圆形1的鼠标事件？

换句话说，我该如何知道在组中鼠标点击了哪个对象？

- marshy101

---

可能是重复问题：https://dev59.com/jlsX5IYBdhLWcg3wRNjK - Kevin Farrugia

我很确定我先问的。 :) - marshy101

Answer 1

当您将对象组合在一起时，您使组合对象表现为一个对象，因此它旋转，移动，缩放，并像任何其他单独的对象一样监听事件。由于现在所有对象都形成一个对象，因此您无法监听单个对象上的任何事件。

当然，组合对象具有item方法item(index)，getObjects()，因此您可以获取单个对象并获取/更新其属性。

自定义解决方案可能是：

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

希望对您有所帮助，祝好运。

- Theo Itzaris

---

谢谢您提供这个信息。不过，我注意到组对象上有一个事件属性。它说将其设置为false，事件会被传播。我以为这就是解决方案，但显然它什么也没做，因为将其设置为false仍然处理事件。那么事件属性的目的是什么呢？ - marshy101

Answer 2

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

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

- Darryl Hebbes

---

谢谢回复，但是 e.target 只返回包含数组的组对象。它没有指明在数组/组中点击了哪个对象。 - marshy101

啊，是的，这是真的。难道没有办法使用e.target来识别您需要的组，然后引用实际组对象的项吗？ http://fabricjs.com/fabric-intro-part-3/#groups - Darryl Hebbes

Answer 3

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

- Oleg Averkov