分组和取消分组Fabric.js对象

我使用fabric.js创建了一种“多边形选择器”或“多边形制作器”。 每次单击都会创建多边形的一个角，可以选择，移动等等…双击原始点’关闭’多边形。 此时，我采用构成多边形的所有圆/线并将它们分组。 到现在为止还挺好。

当双击这样的组时，我希望它取消组合并恢复到可移动节点（即移动圆形重塑多边形等）; 但是有一些奇怪的事情发生了 – 看看当你移动圆圈时会发生什么，某些线条看起来“没有加入”圆圈……

我已经审查了每个group / ungroup相关的fabric.js线程（这里/那里/无处不在）。 似乎没有覆盖我在这里的“连接”对象的类型。

我把这个问题放在一起的小提琴说它比我更好： http ： //jsfiddle.net/bhilleli/4v8mkw6q/

破碎的代码是@：

//dbl clicked a group so lets ungroup it! items = p._objects; // grab the items from the group you want to // translate the group-relative coordinates to canvas relative ones p._restoreObjectsState(); // remove the original group and add all items back to the canvas canvas.remove(p); for (var i = items.length - 1; i >= 0; i--) { canvas.add(items[i]); } canvas.renderAll(); 

Answer 1

你可以使用面料分组工具

您可以将对象分组和取消组合，并同时对其进行操作

例如

  var canvas = new fabric.Canvas('paper',{ isDrawingMode: true }); $("#select").click(function(){ canvas.isDrawingMode = false; }); $("#draw").click(function(){ canvas.isDrawingMode = true; }); $("#group").on('click', function() { var activegroup = canvas.getActiveGroup(); var objectsInGroup = activegroup.getObjects(); activegroup.clone(function(newgroup) { canvas.discardActiveGroup(); objectsInGroup.forEach(function(object) { canvas.remove(object); }); canvas.add(newgroup); }); }); $("#ungroup").click(function(){ var activeObject = canvas.getActiveObject(); if(activeObject.type=="group"){ var items = activeObject._objects; alert(items); activeObject._restoreObjectsState(); canvas.remove(activeObject); for(var i = 0; i < items.length; i++) { canvas.add(items[i]); canvas.item(canvas.size()-1).hasControls = true; } canvas.renderAll(); } }); 

请检查以下链接

http://jsfiddle.net/softvar/NuE78/1/