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

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

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

Answer 2

当您将对象组合在一起时，您使组对象的行为像一个对象，因此它会像任何其他单个对象一样旋转、移动、缩放、侦听事件。你不能只听单个对象上的任何事件，因为现在所有的事件都只形成一个对象。

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

自定义解决方案可以是：
1. 获取mouse:down事件
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 3

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

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

How can I handle events, in Fabric.js, on a individual object within a group?

javascript

fabricjs