javascript - paper - Seleccione Todos los objetos en el lienzo usando Fabric.js

fabric.js tutorial

Question

¿Hay una manera de seleccionar explícitamente todos los objetos presentes en una instancia particular del tiempo? Esto se puede hacer fácilmente usando el mouse para seleccionar todo. ¿Existe un código de solución como un botón llamado Select All para que al hacer clic en él se seleccionen todos los objetos de tipo de tejido y luego pueda aplicar los cambios a todo el ActiveGroup usando canvas.getActiveGroup(); y iterar más.

Answer 1

Buena pregunta.

No hay un método incorporado para esto, pero necesitarías hacer algo en este sentido:

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

El código debe explicarse por sí mismo, y es más o menos lo que sucede debajo del capó cuando se usa el mouse, Mayús + clic, etc.

Answer 2

Esta es una forma más compacta:

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

Answer 3

Usando la versión actual de fabric.js (2.3.1) puedes hacer esto:

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

Esta es una cita de la página de demostración: http://fabricjs.com/manage-selection

Answer 4

canvas.setActiveGroup ya no es una opción. Se borró como una función en la versión 2.0.

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