Question

有没有办法明确选择特定时刻出现的所有对象。这可以通过鼠标轻松完成全部选择。是否存在类似于名为Select All的按钮的代码解决方案，以便单击它将使所有结构类型对象被选中，然后我可以使用canvas.getActiveGroup();将更改应用于整个ActiveGroup并迭代。

Answer 1

好问题。

没有内置的方法，但你需要在这些方面做点什么：

var objs = canvas.getObjects().map(function(o) {
  return o.set('active', true);
});

var group = new fabric.Group(objs, {
  originX: 'center', 
  originY: 'center'
});

canvas._activeObject = null;

canvas.setActiveGroup(group.setCoords()).renderAll();

代码应该是不言自明的，当你使用鼠标，移位+点击等时，它几乎就是在幕后发生的事情。

Answer 2

使用当前版本的fabric.js（2.3.1），您可以这样做：

canvas.discardActiveObject();
var sel = new fabric.ActiveSelection(canvas.getObjects(), {
  canvas: canvas,
});
canvas.setActiveObject(sel);
canvas.requestRenderAll();

这是演示页面的引用：http://fabricjs.com/manage-selection

Answer 3

canvas.setActiveGroup它不再是一种选择。它在版本2.0中被删除了

Answer 4

这是一种更紧凑的形式：

canvas.setActiveGroup(new fabric.Group(canvas.getObjects())).renderAll();

Answer 5

selectAllObjects() {
    this.canvas.discardActiveObject();
    this.canvas.discardActiveGroup();

    let objects: Fabric.Object[] = this.canvas.getObjects().map(function (object: Fabric.Object) {
        return object.set('active', true);
    });

    if (objects.length === 1) {
        this.canvas.setActiveObject(objects[0]);
    } else if (objects.length > 1) {
        let group: Fabric.Group = new Fabric.Group(objects.reverse(), {
            canvas: this.canvas
        } as any);
        group.addWithUpdate(null);
        this.canvas.setActiveGroup(group);
        group.saveCoords();
        this.canvas.trigger("selection:created", {
            target: group
        });
    }

    this.canvas.renderAll();
}

使用Fabric.js选择画布上的所有对象

5 个答案: