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

Question

我使用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/