Question

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

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

这是我的意思的视频...... 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();

}

Answer 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']);
}

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

FabricJs：将分组限制为仅1级深度 - 在分组

1 个答案: