使用Fabric.js選擇畫布上的所有對象

Question

有沒有辦法明確選擇特定時刻出現的所有對象。 這可以通過鼠標輕松完成全部選擇。 是否有一個代碼解決方案，如名為Select All的按鈕，以便單擊它將使所有結構類型對象被選中，然后我可以使用canvas.getActiveGroup();將更改應用於整個canvas.getActiveGroup(); 並迭代。

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();

代碼應該是不言自明的，當你使用鼠標，shift + click等時，它幾乎就是在幕后發生的事情。

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();
}