我正在将 svg 加载到具有子元素的 Fabric 中。我使用 groupSVGElements() 对它们进行分组。
我需要能够选择每个子元素 - 这是一个 onclick 事件，允许我选择一个子对象。
我把这个小提琴放在一起http://jsfiddle.net/AnQW5/2/ http://jsfiddle.net/AnQW5/2/
虽然我可以通过 getObjects 列出该组的子对象，但我无法确定单击了哪个对象。所以 ：
canvas.observe('object:selected', function(e) {
console.log(e.target.getObjects());
// ???
});
有任何想法吗？
您可以使用
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
