在html5中的fabric.js画布上一次删除多个对象 [英] Delete multiple Objects at once on a fabric.js canvas in html5

问题描述

我实际上在一个html5画布项目，它使用fabric.js框架的画布交互。现在我正在努力删除多个对象。以下代码似乎不跟踪所选对象，但跟踪画布上的所有对象。

I'm actually working on a html5 canvas project which uses the fabric.js Framework for the canvas interactions. Now I'm struggeling with the deletion of multiple objects. The following code does not seem to track the selected objects, but tracks all objects on the canvas.

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

不要让我失败。

推荐答案

由于@Kangax注释解决了大部分问题，我发现以下解决方案从画布。

Due to @Kangax comment which solved most of the problem, I found the following solution to delete the currently selected objects from the canvas.

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

此函数检查是否选择了一个组。如果选择了组，则该组的每个对象都将被删除。
如果未选择任何组，该函数将尝试删除所选对象。如果没有选择，画布不会改变。

The function checks whether a group is selected. If a group is selected every object of the group gets removed. If no group is selected the function tries to remove a selected object. If nothing is selected, the canvas is not changed.

这篇关于在html5中的fabric.js画布上一次删除多个对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！