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