web-dev-qa-db-fra.com

Fabric.js: comment désélectionner un ou plusieurs objets sur canevas?

Par exemple, j'ai plusieurs objets sur une toile, A , * [~ # ~] b [~ # ~ ] * et C . Trois de ces objets sont sélectionnés comme activés. En utilisant Fabric.js, est-il possible de supprimer/désactiver un seul des objets?

Par exemple, Trois objets sélectionnés, puis lorsqu'un bouton à l'extérieur du canevas est cliqué, l'objet B est ignoré/désactivé.

J'ai regardé les fichiers doc sur le site officiel de FabricJS et je n'ai trouvé que canvas.deactivateAll (), canvas.discardActiveObject (). Ces fonctions ne peuvent désactiver que tous les objets actifs sans être un objet actif spécifique.

Quelqu'un pourrait-il me donner un guide à ce sujet? Merci!

javascriptcanvasfabricjs
24
PaulLing

Je réponds peut-être tard, mais dans la dernière fabricjs (1.4.3), vous pouvez utiliser ce qui suit pour désélectionner tous les objets sélectionnés sur la toile.

canvas.deactivateAll().renderAll();

J'utilise ceci avant de créer une image de cette toile. J'espère que cela aide quelqu'un.

50
Shantanu Wagh

supposons que vous avez trois objets objectA, ObjectB et ObjectC et que les objets sont sélectionnés. Maintenant, si vous souhaitez désélectionner un objet (par exemple ObjectB). Dans ce cas, vous pouvez essayer le code suivant.

var activeGroup = canvas.getActiveGroup();
activeGroup.removeWithUpdate(ObjectB);
canvas.renderAll();

Si vous n'avez qu'un seul nœud actif, vous pouvez le faire.

canvas.discardActiveObject();
canvas.renderAll();
13
MANISH KUMAR SINGH

Pour ignorer tous les groupes actifs, vous pouvez utiliser la fonction ci-dessous. Ignore les événements du groupe actuellement actifs et se déclenche Si la fonction est appelée par la matrice à la suite d'un événement de souris, l'événement est passé en tant que parmater et envoyé à la fonction de déclenchement pour les événements personnalisés. . Lorsqu'il est utilisé comme méthode, le paramètre e n'a aucune application.

canvas.discardActiveGroup();

Pour jeter un objet sigle, vous pouvez utiliser comme ceci. Ignore les événements d'objet et d'incendie actuellement actifs. Si la fonction est appelée par fabric à la suite d'un événement de souris, l'événement est passé en tant que parmater et envoyé à la fonction fire pour les événements personnalisés. Lorsqu'il est utilisé comme méthode, le paramètre e n'a aucune application.

canvas.discardActiveObject();

Et dans le dernier, le rendu du canevas supérieur et du canevas du conteneur secondaire est finalement réalisé comme ceci.

canvas.renderAll();
12
Shyam Shingadiya

Je viens de trouver un moyen de le faire:

Lorsque plusieurs objets sont activés, ils forment en fait un groupe. Ensuite, il suffit d'utiliser une méthode de fabric.group appelée "removeWithUpdate", ce sera le cas.

Exemple:

var activeGroup = canvas.getActiveGroup();
activeGroup.removeWithUpdate(theObject);
canvas.renderAll();
1
PaulLing