Question

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

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

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

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

有什么想法吗？

Answer 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>

Answer 2

描述

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

代码

λ> take 5 (repeat 0)
[0,0,0,0,0]

参考

活动：http://fabricjs.com/events/

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

2 个答案:

描述

代码

参考