我实际上正在开发一个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());
}
};
不要失败。
答案 0 :(得分:37)
由于@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());
}
};
该功能检查是否选择了一个组。如果选择了一个组,则该组的每个对象都将被删除。 如果未选择任何组,则该函数会尝试删除所选对象。如果未选择任何内容,则不会更改画布。
答案 1 :(得分:5)
您的代码似乎正在选择然后取消选择对象。
这可能会更好:
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 :(得分: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++;
}
}
答案 3 :(得分:0)
我这样做了:
var selectedObj = canvas.getObjects(canvas.getActiveGroup())
返回所选对象的数组。 :) 代码片段中缺少最后一个函数parantpet
答案 4 :(得分:0)
除了我在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);
});
}
}
}
答案 5 :(得分:0)
您知道canvas.remove可以接受多个参数吗?因此最简单的方法应该是:
canvas.remove(...canvas.getObjects());
除了canvas.clear
之外,这只会删除画布中的对象,而不会删除背景。