Javascript 在html5中的fabric.js画布上一次删除多个对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11829786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Delete multiple Objects at once on a fabric.js canvas in html5
提问by John Mayer
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.
我实际上正在开发一个 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());
}
};
Don't get my failure.
不要理解我的失败。
回答by John Mayer
Due to @Kangax comment which solved most of the problem, I found the following solution to delete the currently selected objects from the canvas.
由于@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());
}
};
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.
该函数检查是否选择了一个组。如果选择了一个组，该组的每个对象都会被删除。如果未选择任何组，该功能将尝试删除选定的对象。如果未选择任何内容，则不会更改画布。
回答by Alex W
Your code seems like it is selecting and then de-selecting the objects.
您的代码似乎正在选择然后取消选择对象。
This may work better:
这可能效果更好：
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]);
}
};
Good information link:
好资料链接：
https://github.com/kangax/fabric.js/wiki/Tutorial-2#wiki-modifying-objects
https://github.com/kangax/fabric.js/wiki/Tutorial-2#wiki-modifying-objects
回答by Amit Gaur
You can check any object property and can remove
您可以检查任何对象属性并可以删除
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++;
}
}
回答by Hooman Askari
None of the solutions above (or anywhere elese on stackoverflow) worked for me except for this one solution I found on jsfiddle:
除了我在 jsfiddle 上找到的这个解决方案之外，上面的任何解决方案（或 stackoverflow 上的任何其他解决方案）都不适合我：
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);
});
}
}
}
回答by TAB
Did you know that canvas.remove can take more than one parameter? So the easiest way should be this one:
您知道 canvas.remove 可以接受多个参数吗？所以最简单的方法应该是这个：
canvas.remove(...canvas.getObjects());
Other than canvas.clearthis will only remove the objects in the canvas and not also the background.
除此之外，canvas.clear只会删除画布中的对象，而不会删除背景。
回答by Ajit kohir
I done this:
我这样做了：
var selectedObj = canvas.getObjects(canvas.getActiveGroup())
return me the array of the selected objects. :) the last function paranthesis is missing in your code snippet
将所选对象的数组返回给我。:) 您的代码片段中缺少最后一个函数括号
