Javascript 如何在使用GroupsGelements后选择子元素

我正在将svg加载到具有子元素的结构中。我正在使用GroupsGelements（）对它们进行分组

我需要能够选择每个子元素——这是一个onclick事件，允许我选择一个子对象

我把这把小提琴拼凑起来了

虽然我可以通过getObjects列出组的子对象，但我无法确定单击了哪个对象。因此：

    canvas.observe('object:selected', function(e) {
       console.log(e.target.getObjects());
       // ???
    });

有什么想法吗？

你可以用 canvas.add.apply而不是GroupsGelements，因此您可以： 让每个元素都可以操作

var shapesSvg=''；
var canvas=newfabric.canvas（'canvas'）；
canvas.setHeight（$（window.height（））；
canvas.setWidth（$（window.width（））；
fabric.loadSVGFromString（shapesSvg，函数（对象，选项）{
canvas.add.apply（画布，对象）；
canvas.renderAll（）；
});
html，
身体{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}

说明
下面的代码通过颜色检测屏幕上的任何对象，而不是最佳想法

代码
var$canvas={
活动路径：[]
};
//绑定到“onMouseDown”事件。
函数onMouseDown=函数（选项）{
var mousePos=canvas.getPointer（options.e）；
mousePos.x=parseInt（mousePos.x）；
mousePos.y=parseInt（mousePos.y）；
var width=canvas.getWidth（）；
var height=canvas.getHeight（）；
var pixels=canvas.getContext（）.getImageData（0，0，宽度，高度）；
var pixel=（mousePos.x+mousePos.y*像素.宽度）*4；
var activePathsColor=newfabric['Color']（'rgb（'+像素.数据[pixel]+'，'+像素.数据[pixel+1]+'，'+像素.数据[pixel+2]+'）；
var colorHex='#'+activePathsColor.toHex（）.toLowerCase（）；
var activeObject=canvas.getActiveObject（）；
var-activePath=[]；
//检查活动对象是否为“组”类型，如果是，则推送所选路径。
如果（activeObject.type=='group'）{
对于（var i=0；i

工具书类
事件：
有趣且棘手，到目前为止没有运气。canvas.containsPoint（）和canvas.findTarget（）都不能处理路径组中包含的对象。解组+hittest+重新分组技巧不适用于路径组no remove（）。将SVG加载到常规组不起作用，因为SVG定义的位置并不总是保留。你只需要做转换吗？如果是这样，下一步可能是将svg分解为未分组的元素，然后使用单个“组”转换矩阵对每个元素进行转换。但我希望我可以使用GroupsGelements，用一组x在画布上定位团队，y coords.我想做同样的事情，但我不知道该怎么做，我在上找到了，但是svg正在分组加载，如果我选择ungroup，那么我们就无法选择对象。如果有人在这里给出答案，请提前感谢这里有一个reviver函数，它是loadSVGFromString和loadSVGFromURL的参数。我使用它迭代每个svg子对象，并将它们添加到fabric.group。然后，为了确定在画布上单击了哪个对象，我使用了这个（ref:）；这基本上是在画布上的每个对象上循环，如果它是一个组，则在子对象上循环。这样我就可以选择svg的子元素。在fabricjs.com/kitchensink中给出的示例中，工作正常，但每个元素的边界框不正确
var $canvas = {
    activePaths: []
};

// Bind to `onMouseDown` event.
function onMouseDown = function (options) {

    var mousePos = canvas.getPointer(options.e);
    mousePos.x = parseInt(mousePos.x);
    mousePos.y = parseInt(mousePos.y);

    var width =  canvas.getWidth();
    var height = canvas.getHeight();

    var pixels = canvas.getContext().getImageData(0, 0, width, height);
    var pixel = (mousePos.x + mousePos.y * pixels.width) * 4;

    var activePathsColor = new fabric['Color']('rgb(' + pixels.data[pixel] + ',' + pixels.data[pixel + 1] + ',' + pixels.data[pixel + 2] + ')');
    var colorHex = '#' + activePathsColor.toHex().toLowerCase();

    var activeObject = canvas.getActiveObject();
    var activePath = [];

    // Check if active objects are type of `group`, if so push the selected path.
    if(activeObject.type == 'group') {

          for (var i = 0; i < activeObject.getObjects().length; i++) {
            var path = activeObject.getObjects()[i];
            if (path.getFill().toLowerCase() == colorHex) {
                $canvas.activePaths.push(path);
            }
        }

    }

}