Seleziona tutti gli oggetti su tela utilizzando Fabric.js

Question

C'è un modo per selezionare esplicitamente tutti gli oggetti presenti in una particolare istanza di tempo. Questo può essere fatto facilmente usando il mouse per selezionare tutto. Esiste una soluzione di codice come un pulsante denominato Select All in modo che facendo clic su di esso vengano selezionati tutti gli oggetti del tipo di tessuto e quindi potrei applicare le modifiche all'intero di tale Gruppo attivo utilizzando canvas.getActiveGroup(); e iterando su.

Answer 1

Buona domanda.

Non c'è alcun metodo incorporato per questo, ma si avrebbe bisogno di fare qualcosa in questo senso:

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

Il codice dovrebbe essere auto-esplicativo, ed è più o meno quello che sta succedendo sotto il cofano quando si utilizzare il mouse, shift + click, ecc

Answer 2

Questa è una forma più compatta:

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" non è più un'opzione. E 'stato cancellato come una funzione nella versione 2.0