Выберите Все объекты на холсте, используя Fabric.js

Есть ли способ явно выделить все объекты, присутствующие в конкретном экземпляре времени. Это можно легко сделать с помощью мыши, чтобы выбрать все. Есть ли такое кодовое решение, как кнопка с именем Select All, так что нажатие на нее приведет к выбору всех объектов типа ткани, а затем я смогу применить изменения для всей этой ActiveGroup с помощью canvas.getActiveGroup(); и выполнить итерацию.

Ответ 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 и т.д.

Ответ 2

Это более компактная форма:

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

Ответ 3

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

Ответ 4

"canvas.setActiveGroup" это уже не вариант. Он был удален как функция в версии 2.0