fabricjs - 使用 Fabric.js 以编程方式创建和选择组

Question

假设我有一个包含 6 个对象的 Canvas 和一个位于 Canvas 外的按钮。

当我单击此按钮时，其中 3 个对象将成为一个组并被选中，对象将保持其相对于 Canvas 的位置。

那可能吗？

我尝试了很多东西，但可以设法让它工作。我正在寻找的解决方案如下所示。

var objectList=[1,2,3];    
var newgroup = new fabric.Group();

$.each(objectList, function (i) {
    var obj = canvas.item(i);
    newgroup.add(obj.clone());
    canvas.remove(obj);
});

canvas.add(newgroup)
canvas.setActiveGroup(newgroup);
canvas.renderAll();

Answer 1

你可以使用这样的东西:

(function() {
  var objectList = [1,2,3],
      group = new fabric.Group();

  canvas.forEachObject(function(o, i) {
    if (objectList.indexOf(i) > -1) {
      group.addWithUpdate(o);
      canvas.remove(o);
    }
  });
  canvas.setActiveObject(group);
  canvas.add(group);
})();

仅将索引 1、2 或 3 处的对象添加到组中。