mit Fabric.js

Question

Gibt es eine Möglichkeit explizit auswählen, um alle Objekte, die in einer bestimmten Instanz der Zeit. Dies kann leicht mit der Maus durchgeführt werden, um alle auszuwählen. Gibt es eine Code-Lösung wie ein Knopf Select All so benannt, dass es Klick alle Stoffart machen würde Objekte ausgewählt werden und dann konnte ich die Änderungen ganz dieser ActiveGroup gelten mit canvas.getActiveGroup(); und iterieren.

Answer 1

Gute Frage.

Es gibt keine integrierte Methode für diese, aber man würde etwas in diese Richtung tun müssen:

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 ziemlich viel, was unter der Haube passiert, wenn Sie verwenden Sie die Maus, Shift + Klick usw.

Answer 2

Dies ist eine kompakte Form:

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

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

Answer 4

"canvas.setActiveGroup" ist keine Option mehr. Es wurde als Funktion in der Version 2.0