javascript - paper - fabric.js tutorial

Eliminar varios objetos a la vez en un lienzo fabric.js en html5

Question

De hecho, estoy trabajando en un proyecto de lienzo html5 que utiliza el Framework fabric.js para las interacciones canvas. Ahora estoy luchando con la eliminación de múltiples objetos. El siguiente código no parece rastrear los objetos seleccionados, sino que rastrea todos los objetos en el lienzo.

var deleteSelectedObject = document.getElementById(''delete-item'');
deleteSelectedObject.onclick = function(){
var curSelectedObjects = new Array();
curSelectedObjects = canvas.getObjects(canvas.getActiveGroup);
canvas.discardActiveGroup();
for (var i = 0; i < curSelectedObjects.length; i++){
canvas.setActiveObject(curSelectedObjects[i]);
canvas.remove(canvas.getActiveObject());
}
};

No obtengas mi fracaso.

Answer 1

Debido al comentario de @Kangax que resolvió la mayor parte del problema, encontré la siguiente solución para eliminar los objetos seleccionados actualmente del lienzo.

var deleteSelectedObject = document.getElementById(''delete-item'');
deleteSelectedObject.onclick = function()
{
if(canvas.getActiveGroup()){
canvas.getActiveGroup().forEachObject(function(o){ canvas.remove(o) });
canvas.discardActiveGroup().renderAll();
} else {
canvas.remove(canvas.getActiveObject());
}
};

La función verifica si un grupo está seleccionado. Si se selecciona un grupo, se eliminan todos los objetos del grupo. Si no se selecciona ningún grupo, la función intenta eliminar un objeto seleccionado. Si no se selecciona nada, el lienzo no se cambia.

Answer 2

Hice esto:

 var selectedObj = canvas.getObjects(canvas.getActiveGroup())

devuélveme la matriz de los objetos seleccionados. :) la última paranthesis de función falta en su fragmento de código

Answer 3

Ninguna de las soluciones anteriores (o en cualquier lugar elese en ) funcionó para mí a excepción de esta solución que encontré en jsfiddle:

function deleteObjects(){
var activeObject = canvas.getActiveObject(),
activeGroup = canvas.getActiveGroup();
if (activeObject) {
if (confirm(''Are you sure?'')) {
canvas.remove(activeObject);
}
}
else if (activeGroup) {
if (confirm(''Are you sure?'')) {
var objectsInGroup = activeGroup.getObjects();
canvas.discardActiveGroup();
objectsInGroup.forEach(function(object) {
canvas.remove(object);
});
}
}
}

jsfiddle.net/beewayne/z0qn35Lo

Answer 4

Puede verificar cualquier propiedad del objeto y puede eliminar

var objects = canvas.getObjects();
for (var i = 0; i < objects.length; ) {
if (objects[i].name == ''cropArea'' || objects[i].name == ''bleedLine'') {
canvas.remove(objects[i]);
i = 0;
} else {
i++;
}
}

Answer 5

Su código parece que está seleccionando y luego deseleccionando los objetos.

Esto puede funcionar mejor:

var deleteSelectedObject = document.getElementById(''delete-item'');
deleteSelectedObject.onclick = function()
{
var curSelectedObjects = canvas.getObjects(canvas.getActiveGroup);
canvas.discardActiveGroup();
for (var i = 0; i < curSelectedObjects.length; i++)
{
canvas.remove(curSelectedObjects[i]);
}
};

Buen enlace de información:

https://github.com/kangax/fabric.js/wiki/Tutorial-2#wiki-modifying-objects