如何在使用groupSVGElements后选择子元素 [英] How to select child elements after using groupSVGElements

问题描述

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

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

我把这个小提示放在一起了 http：// jsfiddle .net / AnQW5 / 2 /

虽然我可以通过getObjects列出组的子对象，但我没有办法看到，对象。所以：

  canvas.observe（'object：selected'，function（e）{
 console.log .target.getObjects（））; 
 // ??? 
}）; 
  

任何想法？

解决方案

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

  var shapesSvg ='<？xml version =1.0encoding =UTF-8standalone =no？>< svg version =1.1xmlns：svg =http://www.w3.org/2000/svgxmlns =http://www.w3.org/2000/svgwidth =320height =240viewBox =0 0 320 240 >< rect id =rectx =5y =50width =100height =100style =fill：rgb（255,0,0）;> / rect> < circle id =circlecx =165cy =100r =50style =fill：rgb（0,255,0）;/>< / svg>'; var canvas = new fabric.Canvas（'canvas'）; canvas.setHeight（$（window）.height（））; canvas.setWidth（$（window）.width（））; fabric.loadSVGFromString（shapesSvg，function 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>  

I am loading an svg into Fabric which has child elements. I'm grouping them using groupSVGElements().

I need to be able select each child element - that is an onclick event that allows me to select a child object.

I've thrown together this fiddle http://jsfiddle.net/AnQW5/2/

Although I can list out the child objects of the group via getObjects, theres no way that I can see to determine which object was clicked. So :

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

Any ideas?

解决方案

You can use canvas.add.apply instead groupSVGElements, so you can : have each element to manipulate

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>

这篇关于如何在使用groupSVGElements后选择子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！