it-swarm.com.de

Wählen Sie Alle Objekte auf der Leinwand mithilfe von Fabric.js aus

Gibt es eine Möglichkeit, alle Objekte, die sich zu einem bestimmten Zeitpunkt befinden, explizit auszuwählen ... Dies kann leicht mit der Maus erfolgen, um alle Objekte auszuwählen. Gibt es eine Codelösung wie eine Schaltfläche mit dem Namen Select All, so dass durch Klicken auf alle ausgewählten Objekttypobjektobjekte die Änderungen auf die gesamte ActiveGroup mit Hilfe von canvas.getActiveGroup(); angewendet und wiederholt werden.

21
softvar

Gute Frage.

Es gibt keine integrierte Methode dafür, aber Sie müssten etwas in dieser Richtung tun:

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

Der Code sollte selbsterklärend sein, und es ist so ziemlich das, was unter der Haube passiert, wenn Sie Maus, Umschalt + Klick usw. verwenden.

31
kangax

Mit der aktuellen Version von fabric.js (2.3.1) können Sie Folgendes tun:

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

Dies ist ein Zitat von der Demo-Seite: http://fabricjs.com/manage-selection

2

canvas.setActiveGroup ist keine Option mehr. In Version 2.0 wurde es als Funktion gelöscht

1
Cenlan

Dies ist eine kompaktere Form:

canvas.setActiveGroup(new fabric.Group(canvas.getObjects())).renderAll();
0
perfect_element
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();
}
0
Milan Hlinák