web-dev-qa-db-fra.com

Sélectionnez Tous les objets sur la toile en utilisant Fabric.js

Existe-t-il un moyen de sélectionner explicitement tous les objets présents à un moment particulier . Cela peut être facilement fait en utilisant la souris pour tout sélectionner. Existe-t-il une solution de code semblable à un bouton nommé Select All pour que cliquer dessus fasse sélectionner tous les objets de type de structure, puis appliquer les modifications à l'ensemble de cet ActiveGroup en utilisant canvas.getActiveGroup(); et effectuer une itération supplémentaire.

javascripthtml5-canvasfabricjs
21
softvar

Bonne question.

Il n'y a pas de méthode intégrée pour cela, mais vous devez faire quelque chose dans ce sens:

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

Le code devrait être explicite, et c’est à peu près ce qui se passe sous le capot lorsque vous utilisez la souris, la combinaison de touches Maj + clic, etc.

31
kangax

En utilisant la version actuelle de fabric.js (2.3.1), vous pouvez le faire:

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

Ceci est une citation de la page de démonstration: http://fabricjs.com/manage-selection

2
Tom-Steve Watzke

canvas.setActiveGroup ce n'est plus une option. Il a été effacé comme une fonction dans la version 2.0

1
Cenlan

C'est une forme plus compacte:

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