Удаляет сразу несколько объектов на холсте fabric.js в html5

Я на самом деле работаю над проектом html5 canvas, который использует fabric.js Framework для взаимодействия с холстом. Теперь я борюсь с удалением нескольких объектов. Следующий код, похоже, не отслеживает выбранные объекты, а отслеживает все объекты на холсте.

var deleteSelectedObject = document.getElementById('delete-item');
deleteSelectedObject.onclick = function(){
    var curSelectedObjects = new Array();
    curSelectedObjects = canvas.getObjects(canvas.getActiveGroup);
    canvas.discardActiveGroup();
    for (var i = 0; i < curSelectedObjects.length; i++){
        canvas.setActiveObject(curSelectedObjects[i]);
        canvas.remove(canvas.getActiveObject());
    }
};

Не получишь мой отказ.

Ответ 1

Из-за комментария @Kangax, который решил большую часть проблемы, я нашел следующее решение для удаления выбранных объектов из холста.

var deleteSelectedObject = document.getElementById('delete-item');
deleteSelectedObject.onclick = function()
{
if(canvas.getActiveGroup()){
      canvas.getActiveGroup().forEachObject(function(o){ canvas.remove(o) });
      canvas.discardActiveGroup().renderAll();
    } else {
      canvas.remove(canvas.getActiveObject());
    }
};

Функция проверяет, выбрана ли группа. Если выбрана группа, каждый объект группы удаляется. Если ни одна группа не выбрана, функция пытается удалить выбранный объект. Если ничего не выбрано, холст не изменяется.

Ответ 2

Ваш код кажется, что он выбирает и затем отменяет выбор объектов.

Это может работать лучше:

var deleteSelectedObject = document.getElementById('delete-item');
deleteSelectedObject.onclick = function()
{
    var curSelectedObjects = canvas.getObjects(canvas.getActiveGroup);

    canvas.discardActiveGroup();
    for (var i = 0; i < curSelectedObjects.length; i++)
    {
        canvas.remove(curSelectedObjects[i]);
    }
};

Хорошая информационная ссылка:

https://github.com/kangax/fabric.js/wiki/Tutorial-2#wiki-modifying-objects

Ответ 3

Вы можете проверить любое свойство объекта и удалить

var objects = canvas.getObjects();

for (var i = 0; i < objects.length; ) {
  if (objects[i].name == 'cropArea' || objects[i].name == 'bleedLine') {
    canvas.remove(objects[i]);
    i = 0;
  } else {
    i++;
  }
}

Ответ 4

Я сделал это:

  var selectedObj = canvas.getObjects(canvas.getActiveGroup())

верните мне массив выбранных объектов.:) последний фрагмент функции отсутствует в фрагменте кода

Ответ 5

Ни одно из вышеперечисленных решений (или где-либо elese on stackoverflow) не работало для меня, кроме этого одного решения, которое я нашел на jsfiddle:

function deleteObjects(){
var activeObject = canvas.getActiveObject(),
activeGroup = canvas.getActiveGroup();
if (activeObject) {
    if (confirm('Are you sure?')) {
        canvas.remove(activeObject);
    }
}
else if (activeGroup) {
    if (confirm('Are you sure?')) {
        var objectsInGroup = activeGroup.getObjects();
        canvas.discardActiveGroup();
        objectsInGroup.forEach(function(object) {
        canvas.remove(object);
        });
    }
}
}

http://jsfiddle.net/beewayne/z0qn35Lo/