Позволить пользователю удалить выбранный объект fabric js

У меня есть простое приложение на основе ткани js, где я позволю пользователям добавлять фигуры, соединять их и анимировать.

ниже мой 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);
}

Это мой Скрипка. Вы можете нажать на новую анимацию, а затем добавить объекты на данный момент.

Я хочу, чтобы пользователь выбрал какой-то объект, а затем также смог удалить его, я не уверен, как. Я нашел это удалить сразу несколько объектов на ткани.JS canvas в html5 но я не был в состоянии реализовать его успешно. Я в принципе хочу, чтобы пользователи могли выбрать объект и удалить его.

18
canvas fabricjs html5 javascript

4 ответов

вы можете использовать метод remove (), например.

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

jsfiddle

26

С новой версии ткани.JS был выпущен - вы должны использовать:

canvas.remove(canvas.getActiveObject());
26

Я использую ткань JS 2.3.6.

Я хотел, чтобы позволить пользователю выбрать один или несколько объектов на холсте и удалить их, нажав кнопку Удалить.

удалены методы из старых версий

следующие методы больше не доступны с момента введения ActiveSelection:

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

вот мой код, который прекрасно работает для меня и надеюсь вас тоже.

$('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();
}
0

удалить все выделенные объекты:

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