Pozwól użytkownikowi usunąć wybrany obiekt js tkaniny

Question

Mam prostą aplikację opartą na js, w której pozwolę użytkownikom dodawać kształty, łączyć je i animować.

Poniżej mój 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); 
} 

To mój Fiddle. Możesz kliknąć nową animację, a następnie dodawać obiekty od teraz.

Chcę, aby użytkownik wybrał jakiś obiekt, a następnie może go usunąć. Nie jestem pewien jak. Znalazłem to Delete multiple Objects at once on a fabric.js canvas in html5 Ale nie udało mi się go z powodzeniem wdrożyć. Zasadniczo chcę, aby użytkownicy mogli wybrać obiekt i go usunąć.

Answer 1

Możesz użyć metody remove(), np.

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

jsfiddle

Answer 2

Ponieważ nowa wersja fabric.js został zwolniony - należy użyć:

canvas.remove(canvas.getActiveObject());