在html5中的fabric.js画布上一次删除多个对象

Question

我实际上正在开发一个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());
    }
};

不要失败.

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

该功能检查是否选择了一个组.如果选择了一个组,则该组的每个对象都将被删除.如果未选择任何组,则该函数会尝试删除所选对象.如果未选择任何内容,则不会更改画布.

Answer 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