Fabric.js group / ungroup - 取消组合时单个对象消失

时间:2017-07-07 15:20:56

标签: angularjs fabricjs

我在angularJS控制器中有这个功能:

    function group(){
    var activegroup = canvas.getActiveGroup();
    var objectsInGroup = activegroup.getObjects();

    activegroup.clone(function(newgroup) {
        canvas.discardActiveGroup();
        objectsInGroup.forEach(function(object) {
            canvas.remove(object);  
        });
        canvas.add(newgroup);

    });
}

function ungroup(){
   var activeObject = canvas.getActiveObject();
    if(activeObject.type=="group"){
        var items = activeObject._objects;
        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();
}

几乎完美地工作 - 当我取消组合对象时,jus不会被渲染(它们仍在画布中,但不可见)。我可以单独选择对象,即使它们是不可见的。 Selectin多个对象将在选中它们时显示它们 - 取消选择一个将让另一个消失。简而言之:取消组合对象不会再次显示为单个对象。

这仅适用于诸如box,circle,triangle之类的基元。文本图像不受影响。

非常感谢帮助!

1 个答案:

答案 0 :(得分:0)

function ungroup(){
 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]);
      items[i].dirty = true; //set object dirty true
      canvas.item(canvas.size()-1).hasControls = true;
    }

    canvas.renderAll();
 }
}

如果将object设置为true,它将在renderAll()调用中呈现并重新绘制。