使用 groupSVGElements 后如何选择子元素答案

【问题标题】：How to select child elements after using groupSVGElements使用 groupSVGElements 后如何选择子元素
【发布时间】：2016-04-03 23:43:15
【问题描述】：

我正在将 svg 加载到具有子元素的 Fabric 中。我正在使用 groupSVGElements() 对它们进行分组。

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

我把这个小提琴 http://jsfiddle.net/AnQW5/2/ 放在一起

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

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

有什么想法吗？

【问题讨论】：

很有趣，但很难破解——到目前为止还没有运气。 canvas.containsPoint() 和 canvas.findTarget() 都不适用于 PathGroup 中包含的对象。 ungroup+hittest+regroup 技巧不适用于 PathGroup——没有 remove()。将 SVG 加载到常规组中不起作用，因为 svg 定义的位置并不总是保留。您只需要翻译转换吗？如果是这样，下一个尝试可能是将您的 svg 分解为未分组的元素，然后使用单个“组”转换矩阵对每个元素进行转换。
是的，那是我的下一步行动。但我希望我可以使用 groupSVGElements 并将组定位在画布上，只需一组 x,y 坐标。
我想做同样的事情，但我不知道我在fabricjs.com/kitchensink 上找到了这个，但 svg 正在组中加载，如果我选择取消组合，那么我们无法选择对象如果有人在这里得到答案，请提前谢谢
有一个reviver函数，它是loadSVGFromString和loadSVGFromURL的参数。我用它来遍历每个 svg 子对象并将它们添加到一个 fabric.group。然后为了确定在画布上点击了哪个对象，我使用了这个jsfiddle.net/LNt2g/6（参考：stackoverflow.com/questions/15196603/…）；这基本上会遍历画布上的每个对象，如果它是一个组，则遍历子对象。
我想加载 svg 而不在画布上分组。这样我就可以选择 svg 的子元素。在 fabricjs.com/kitchensink 给出的示例中工作正常，但每个元素的边界框不正确

标签： javascript canvas fabricjs

【解决方案1】：

你可以使用 canvas.add.apply 代替 groupSVGElements，所以你可以：让每个元素都可以操作

var shapesSvg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240"><rect id="rect" x="5" y="50" width="100" height="100" style="fill: rgb(255,0,0);"></rect> <circle id="circle" cx="165" cy="100" r="50" style="fill: rgb(0,255,0);"/></svg>';

var canvas = new fabric.Canvas('canvas');

canvas.setHeight($(window).height());
canvas.setWidth($(window).width());


fabric.loadSVGFromString(shapesSvg, function(objects, options) {
  canvas.add.apply(canvas, objects);
  canvas.renderAll();
});

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="canvas"></canvas>

【讨论】：

【解决方案2】：

说明

以下代码通过颜色检测屏幕上的任何对象，而不是最好的想法。

代码

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);
            }
        }

    }

}

参考

事件：http://fabricjs.com/events/

【讨论】：