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

当您将对象组合在一起时，您可以使组对象充当对象，因此它会旋转，移动，缩放，它会像任何其他单个对象一样侦听事件。你不能只听到各个对象上的任何事件，因为现在它们只是形成一个对象。

当然，组对象具有项目方法项（索引），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

希望有所帮助，祝你好运

Answer 2

当事件触发时，您可以通过画布侦听器callBack检查目标对象，我不确定该对象是否具有该形状类型的属性。否则，您可以在添加圆圈时指定一个属性，表示它是一个圆圈，然后通过该事件选择它。

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

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

2 个答案: