Javascript fabricjs-组未接收鼠标事件

我正在开发一个库，将

FabricJS

封装在

d3.js

中，允许我在使用画布绘制实际图形时使用d3创建不同的视觉效果。几乎所有的事情都完成了，但我无法让事件在组元素上运行

目前，我正在测试一个游戏。一切都正常，但当我尝试单击属于

fabric.Group

对象的节点时，什么也没有发生

通过Fabric进行调试，我发现它最终位于

\u searchPossibleTargets

，它从不返回任何目标。再进行几次调试，我发现

组的界限没有设置好。如果查看示例的源代码，您会发现所有数据都是在添加到
组后设置的

没有重新计算组大小的功能，这意味着我的单击事件对组无效。虽然由于未设置值而导致预期结果不正确，但整个图形都被破坏了，给我留下了混乱的视觉效果

我甚至在保存left/top后尝试过使用一些内部函数，如
\u calcBounds
，但它最终会导致与
addWithUpdate
相同的混乱局面

最糟糕的情况是，我可能会尝试
KineticJS
看看这是否解决了问题，因为我需要做的唯一更改是添加一个层并更改名称，但如果不起作用，那么我将切换回Fabric。不管怎样，我更喜欢使用
织物
。有什么办法可以这样做吗

如果需要更多信息，请随时询问

编辑1:
好的，我用Fabric做了一个小例子来演示这个问题：

如果单击这些框，它们应该会更改。但是如果你注意到，最后一个盒子不起作用

FabricJS工作组：

var r2 = new fabric.Rect({'fill':'green',
                              'width':100,
                              'height':100});
r2.selectable = false;
var g1 = new fabric.Group([r2], {'top':0,
                                     'left':100});
g1.selectable = false;
g1.on('mousedown', function() {
    if (r2.getFill() === 'green') {
        r2.set({'fill':'yellow'});
    } else {
        r2.set({'fill':'green'});
    }
});
can.add(g1);

FabricJS非工作组，但d3使用需要：

var r3; //-just here for the group event handler
var g2 = new fabric.Group();
g2.selectable = false;

// * Add the group to canvas, then set attributes
can.add(g2);
g2.set({'top':0,
        'left':200});
g2.on('mousedown', function() {
    if (r3.getFill() === 'orange') {
        r3.set({'fill':'purple'});
    } else {
        r3.set({'fill':'orange'});
    }
});

// * Create and add the rect to the group, then set attributes
r3 = new fabric.Rect();
r3.selectable = false;

//Note: I'm using "add". If you change this to "addWithUpdate" you will see the layout/drawing issue I mentioned
g2.add(r3);
r3.set({'fill':'orange',
        'width':100,
        'height':100});

使用包装器，我将在d3中构建该示例（该示例将生成与第二个非工作示例相同的代码）：

请注意，
selective
在我的包装中默认设置为false。
我不知道Fabric.js实现的细节，但在SVG中，
元素本身没有任何高度、宽度或位置，这可能是问题的一部分。正确，尽管我没有使用SVG。我正在使用的这个包装器允许我将d3与Canvas一起使用，而不是SVG。只是建议，如果他们试图模拟SVG函数行为，这可能是一个问题。不管是哪种方式，我都建议将一个简化的工作示例放在一起，这样其他人就可以看到正在发生的事情，并尝试直接进行调试。同意，但我必须看到，因为包装器还没有发布。应该不会太难。我看到了你的小提琴，它看起来像fabricJS库的一个bug。如果您想在fabricjs github页面上打开问题，请。与当前版本的库有关的问题仍然存在。
var g = canvasElement.append('group')
                     .attr({'top':0,
                            'left':200})
                     .on('mousedown', function() {
                         var rect = this.select('rect');
                         if (rect.attr('fill') === 'orange') {
                             rect.attr('fill', 'purple');
                         } else {
                             rect.attr('fill', 'orange');
                         }
                     });

g.append('rect')
 .attr({'fill':'orange',
        'width':100,
        'height':100});