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

Posted 2023-03-05

【中文标题】在 html5 中的 fabric.js 画布上一次删除多个对象

【英文标题】：Delete multiple Objects at once on a fabric.js canvas in html5

【发布时间】：2012-08-03 12:18:36

【问题描述】：

我实际上正在开发一个 html5 画布项目，该项目使用 fabric.js 框架进行画布交互。现在我正在努力删除多个对象。下面的代码似乎并不跟踪选中的对象，而是跟踪画布上的所有对象。

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

别误会我的失败。

【问题讨论】：

附注：不要使用var curSelectedObjects = new Array(); new Array，只需使用[]。尤其是在这种情况下，您处理的不是数组，而是节点列表（！== 相同的东西）

您是否要删除选定的一组对象？

@kangax 是的，这正是我想要做的。有什么建议吗？

canvas.getActiveGroup().forEachObject(function(o) canvas.remove(o) ); canvas.discardActiveGroup().renderAll();

【参考方案1】：

您的代码似乎正在选择然后取消选择对象。

这可能会更好：

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

【参考方案2】：

由于@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());
    
;

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

【讨论】：

由于某种原因，您的解决方案不起作用，但这个解决方案有效：jsfiddle.net/beewayne/z0qn35Lo

【参考方案3】：

我这样做了：

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

返回所选对象的数组。 :) 您的代码 sn-p 中缺少最后一个函数括号

【参考方案4】：

您可以检查任何对象属性并可以删除

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++;
  

【参考方案5】：

除了我在 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/

【参考方案6】：

你知道canvas.remove 可以接受多个参数吗？所以最简单的方法应该是这个：

canvas.remove(...canvas.getObjects());

除了canvas.clear，这只会删除画布中的对象，而不是背景。