Cho phép người dùng xóa đối tượng js vải đã chọn

Question

Tôi có ứng dụng dựa trên vải đơn giản, nơi tôi sẽ cho phép người dùng thêm hình dạng kết nối chúng và tạo hoạt ảnh cho họ.

Sau đây là JS của tôi

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); 
} 

Đây là Fiddle tôi. Bạn có thể bấm vào hình ảnh động mới và sau đó thêm các đối tượng như của bây giờ.

Tôi muốn người dùng chọn một số đối tượng và sau đó cũng có thể xóa đối tượng Tôi không chắc chắn cách thức. Tôi tìm thấy điều này Delete multiple Objects at once on a fabric.js canvas in html5 Nhưng tôi đã không thể thực hiện thành công. Về cơ bản, tôi muốn người dùng có thể chọn một đối tượng và xóa nó.

Answer 1

Bạn có thể sử dụng phương thức remove(), ví dụ:

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

jsfiddle

Answer 2

Kể từ khi phiên bản mới của fabric.js được phát hành - bạn nên sử dụng:

canvas.remove(canvas.getActiveObject());