javascript - objetos - Permitir al usuario eliminar un objeto js de tejido seleccionado

metodos en javascript

Question

Tengo una aplicación simple basada en tejido js donde permitiré a los usuarios agregar formas, conectarlos y animarlos.

Siguiente es mi JS

var canvas; 
window.newAnimation = function(){
   canvas = new fabric.Canvas(''canvas'');
}

window.addRect = function(){
    var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: ''red'',
  width: 20,
  height: 20,
});
    canvas.add(rect);

}

window.addCircle = function(){
    var circle = new fabric.Circle({
  radius: 20, fill: ''green'', left: 100, top: 100
});
    canvas.add(circle);
}

Este es mi Fiddle . Puede hacer clic en la nueva animación y luego agregar objetos a partir de ahora.

Quiero que el usuario seleccione un objeto y luego pueda borrarlo. No estoy seguro de cómo. Encontré esto Eliminar varios objetos a la vez en un lienzo fabric.js en html5 Pero no pude implementarlo correctamente. Básicamente quiero que los usuarios puedan seleccionar un objeto y borrarlo.

Answer 1

Desde que se lanzó la nueva versión de fabric.js, debe usar:

canvas.remove(canvas.getActiveObject());

Answer 2

Eliminar todos los objetos seleccionados:

canvas.getActiveObjects().forEach((obj) => {
  canvas.remove(obj)
});
canvas.discardActiveObject().renderAll()

Answer 3

Estoy usando Fabric JS 2.3.6.

Quería permitir al usuario seleccionar uno o más objetos en el lienzo y eliminarlos haciendo clic en el botón Eliminar.

Métodos eliminados de versiones anteriores

Los siguientes métodos ya no están disponibles desde la introducción de ActiveSelection:

setActiveGroup(group);
getActiveGroup();
deactivateAll();
discardActiveGroup();
deactivateAllWithDispatch();

Aquí está mi código que funciona muy bien para mí y espero que usted también.

$(''html'').keyup(function(e){
        if(e.keyCode == 46) {
            deleteSelectedObjectsFromCanvas();
        }
});    

function deleteSelectedObjectsFromCanvas(){
    var selection = canvas.getActiveObject();
    if (selection.type === ''activeSelection'') {
        selection.forEachObject(function(element) {
            console.log(element);
            canvas.remove(element);
        });
    }
    else{
        canvas.remove(selection);
    }
    canvas.discardActiveObject();
    canvas.requestRenderAll();
}

Answer 4

Puede utilizar el método remove (), por ejemplo.

window.deleteObject = function() {
        canvas.getActiveObject().remove();
}

jsfiddle