Question

假设我有一个画布，其中包含6个对象和画布外的按钮。

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

这可能吗？

我尝试了很多东西，但可以管理它。我正在寻找的解决方案如下所示。

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的对象才会添加到组中。

Answer 2

在我之后重新绘制与他们的连接时，将所选项目添加为组会产生奇怪的结果。 fabic的ActiveSelection是用于以编程方式将选择组添加到Canvas的预期组对象（可能在2013年不存在）

我的剪辑也适用于以下移动事件，它根据两个属性选择项目＆＃39; issueType＆＃39;和＆＃39; clusterIndex＆＃39;：

let allObjects = CANVAS.getObjects();
let selectedObjects = [];
for(let i=0;i < allObjects.length;i++){
    let object = allObjects[i];
    if(object.issueType && object.clusterIndex === clusterIndex){
        selectedObjects.push(object);
        }
    }
let selectionGroup = new fabric.ActiveSelection(selectedObjects);
CANVAS.add(selectionGroup);
CANVAS.setActiveObject(selectionGroup);

Answer 3

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

上面的代码应该适合你无论如何它将组对象1,2,3

你所要做的就是摆脱原始对象并将克隆分组

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

3 个答案: