FabricJs：将分组限制为仅 1 级深度 - 在分组之前取消对所有对象的分组答案

【问题标题】：FabricJs: Limit grouping to only 1 level deep - Ungroup all objects before groupingFabricJs：将分组限制为仅 1 级深度 - 在分组之前取消对所有对象的分组
【发布时间】：2017-11-09 16:57:16
【问题描述】：

我不希望用户能够将分组项目分组到另一个组中。我实现这一点的解决方案基本上是当用户单击“组”按钮时，我将所有内容取消分组，然后再次对选择进行分组。

我的问题是，当这种情况发生时，未分组的项目会重复。一组在画布上，一组在新组中。

这是我的意思的视频... https://screencast-o-matic.com/watch/cbXQfa2lJg

这是我的代码...

export function groupSelectedItems() {

  canvas = document.getElementById("c").fabric;
  var activegroup = canvas.getActiveGroup();
  var objectsInGroup = activegroup.getObjects();

  //Ungroup all items first. This will limit grouping to only one level deep.
  objectsInGroup.forEach(function(o) {

      if(o.type=="group"){

        //ungroup items within this group
        var items = o.getObjects();

        o.destroy();
        canvas.remove(o);

        items.forEach(function(i) {
          canvas.add(i);
          activegroup.addWithUpdate(i)
          canvas.renderAll();
        });
      }
  });

  //Create the group
  activegroup.clone(function(newgroup) {

    canvas.discardActiveGroup();
    objectsInGroup.forEach(function(object) {
        canvas.remove(object);
    });

    canvas.add(newgroup);
    newgroup.setControlsVisibility({'tl': false, 'tr': false, 'bl': false, 'br': false, 'ml': false, 'mr': false, 'mb': false, 'mt': false});

  }, ['id', 'componentType', 'shape']);

  canvas.renderAll();

}

【问题讨论】：

标签： fabricjs

【解决方案1】：

function groupSelectedItems() {
  canvas = document.getElementById("c").fabric;
  var activegroup = canvas.getActiveGroup();

  activegroup.clone(function(newgroup) {
    canvas.discardActiveGroup();
    activegroup.forEachObject(function(object) {
      canvas.remove(object);
    });
    newgroup.forEachObject(function(object) {
      if (object.type == 'group') {
        object.destroy();
        newgroup.removeWithUpdate(object);
        object.forEachObject(function(obj) {
          newgroup.addWithUpdate(obj);
        })
      }
    });
    canvas.add(newgroup);
  }, ['id', 'componentType', 'shape']);
}

检查组中的所有对象，如果存在任何组对象，则取消所有对象的组合，然后添加到画布。

【讨论】：