Javascript 如何在保留背景图像的同时从fabric js画布中删除对象

Javascript 如何在保留背景图像的同时从fabric js画布中删除对象,javascript,fabricjs,Javascript,Fabricjs,我正在设计一个网页,允许用户上传图像并进行测量(计数、长度和角度)。使用jQuery和fabric.js-用户可以按三个按钮中的一个进行适当的分析(即计数、长度或角度)。然而,目前我还不知道如何在保留用户上传的背景图像的同时从一个画布上删除对象。非常感谢您的帮助 您只需调用canvas的clear方法。 看看下面的可执行代码段(),您可以加载图像作为背景,在其上绘制矩形并删除所有矩形 var生态命令; (功能(eCommands){ eCommands[eCommands[“None”]=0]

我正在设计一个网页,允许用户上传图像并进行测量(计数、长度和角度)。使用jQuery和fabric.js-用户可以按三个按钮中的一个进行适当的分析(即计数、长度或角度)。然而,目前我还不知道如何在保留用户上传的背景图像的同时从一个画布上删除对象。非常感谢您的帮助

您只需调用canvas的
clear
方法。 看看下面的可执行代码段(),您可以加载图像作为背景,在其上绘制矩形并删除所有矩形

var生态命令;
(功能(eCommands){
eCommands[eCommands[“None”]=0]=“None”;
eCommands[eCommands[“Rect”]=1]=“Rect”;
电子命令[电子命令[“删除”]=2]=“删除”;
})(生态命令| |(生态命令={}));
var应用程序=(函数(){
函数应用程序(画布、rectButton、deleteButton、uploadButton){
此._currentCommand=eCommands.None;
此._canvas=newfabric.canvas(canvas);
这个。\ rectButton=rectButton;
这是._deleteButton=deleteButton;
这个._uploadButton=uploadButton;
var cc=此。_currentCommand;
var c=这个;
var self=这个;
这是。_drawRect=函数(){
self.\u currentCommand=eCommands.Rect;
};
这是。_delete=函数(){
c、 清除();
};
此._executeCurrentCommand=函数(e){
开关(自。_currentCommand){
case eCommands.Rect:
var rect=new fabric.rect({
左:c.getPointer(e.e).x-10,
顶部:c.getPointer(e.e).y-10,
填充:“红色”,
宽度:20,
身高:20
});
c、 添加(rect);
c、 renderal.bind(c);
打破
}
};
这是。\牵引杆接地=功能(e){
var reader=new FileReader();
reader.onload=函数(事件){
c、 setBackgroundImage(event.target.result,c.renderAll.bind(c),{});
};
reader.readAsDataURL(e.target.files[0]);
};
this.\u rectButton.addEventListener('click',this.\u drawRect,false);
此._deleteButton.addEventListener('单击',此._delete,false);
此._uploadButton.addEventListener('change',this._DruckGround,false);
this.\u canvas.on('mouse:up',this.\u executecurrent命令);
}
退货申请;
})();
var p=新应用程序(document.getElementById('c'),
document.getElementById('btn_rect'),
document.getElementById('btn_delete'),
document.getElementById('btn_upload')
#c{
边框:1px实心#333;
}