javascript - online - Fabric.js: ¿cómo deseleccionar uno o varios objetos en el lienzo?

fabric.js example

Question

Por ejemplo, tengo varios objetos en un lienzo, A , * B * y C. Tres de estos objetos se seleccionan como activados. Al usar Fabric.js, ¿es posible descartar / desactivar solo uno de los objetos?

Por ejemplo, Tres objetos como seleccionados, luego, cuando se hace clic en un botón fuera del lienzo, el objeto B se descarta / desactiva.

Busqué en los archivos de documentos en el sitio web oficial de FabricJS y solo encontré canvas.deactivateAll () , canvas.discardActiveObject () . Estas funciones solo pueden desactivar todos los objetos activos mientras no sean un objeto activo específico.

¿Podría alguien por favor darme una guía sobre esto? ¡Gracias!

Answer 1

Acabo de encontrar una manera de hacerlo:

Cuando se activan múltiples objetos, en realidad forman un grupo. Entonces, en realidad solo necesitas usar un método de fabric.group llamado "removeWithUpdate" y así funcionará.

Ejemplo:

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

Answer 2

Para descartar todos los grupos activos, puede usar la siguiente función. Descartar los eventos del grupo y el fuego activos actualmente Si la función es invocada por el tejido como consecuencia de un evento del mouse, el evento se pasa como parmater y se envía a la función fire para los eventos personalizados. . Cuando se utiliza como método, el parámetro e no tiene ninguna aplicación.

canvas.discardActiveGroup();

Para descartar el objeto sigle puedes usarlo así. Descarta los objetos actualmente activos y los eventos de fuego. Si la función es llamada por el tejido como consecuencia de un evento del mouse, el evento se pasa como parmater y se envía a la función de disparo para los eventos personalizados. Cuando se utiliza como método, el parámetro e no tiene ninguna aplicación.

canvas.discardActiveObject();

Y en el último, finalmente se muestran tanto el lienzo superior como el lienzo del contenedor secundario como este.

canvas.renderAll();

Answer 3

suponga que tiene tres objetos objectA, ObjectB y ObjectC y los objetos están seleccionados. Ahora si desea deseleccionar cualquier objeto (por ejemplo, ObjectB). En este caso puedes intentar seguir el código.

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

Si solo tiene un nodo activo, puede hacerlo.

canvas.discardActiveObject();
canvas.renderAll(); 

Answer 4

Puede que tarde en responder esto, pero en la última fabricjs (1.4.3) puede usar lo siguiente para deseleccionar todos los objetos seleccionados en el lienzo.

canvas.deactivateAll().renderAll();

Estoy usando esto antes de crear una imagen de ese lienzo. Espero que ayude a alguien.