如何在使用groupSVGElements后选择子元素

How to select child elements after using groupSVGElements

本文关键字：选择 元素 groupSVGElements      更新时间：2023-09-26

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

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

我把这把小提琴拼凑在一起了http://jsfiddle.net/AnQW5/2/

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

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

有什么想法吗？

您可以使用canvas.add.apply改为groupSVGE元素，因此您可以：让每个元素操作

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>

描述

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

代码

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/

相关文章：