分组和取消分组结构.js对象

Grouping and Ungrouping Fabric.js objects

本文关键字：js 对象 取消 结构      更新时间：2023-09-26

我使用fabric.js创建了一个'多边形选择器'或'多边形制造商'。每次单击都会创建多边形的一个角，可以选择、移动等...双击原始点可"关闭"面。此时，我获取构成多边形的所有圆/线并将它们分组。目前为止，一切都好。

当双击这样的组时，我希望它取消分组并恢复到可移动节点（即移动圆圈会重塑多边形等）; 但是有一些奇怪的事情正在发生 - 看看当你移动圆圈时会发生什么，某些线似乎"没有连接"到圆圈......

我已经查看了每个组/取消分组相关的结构.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();

您可以使用结构分组工具

您可以将对象分组和取消组合在一起，并在 同时

例如 

 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/

    if (!canvas.getActiveObject()) {
      return;
    }
    if (canvas.getActiveObject().type !== 'group') {
      return;
    }
    canvas.getActiveObject().toActiveSelection();
    canvas.requestRenderAll();

从 ： http://fabricjs.com/manage-selection

如果getActiveGroup（）不可用，则可以使用它进行分组（在鼠标选择多个对象后）：

toGroup（） 仅在选择了多个对象时可用

var activeObj = canvas.getActiveObject();
var activegroup = activeObj.toGroup();
var objectsInGroup = activegroup.getObjects();
activegroup.clone(function(newgroup) {
    canvas.remove(activegroup);
    objectsInGroup.forEach(function(object) {
        canvas.remove(object);  
    });
    canvas.add(newgroup);
});

变化http://fabricjs.com/v2-breaking-changes-2

相关文章：