Javascript 允许用户删除选定的fabric js对象

我有一个简单的基于fabric js的应用程序，可以让用户添加形状，将它们连接起来并制作动画

下面是我的JS

var canvas; 
window.newAnimation = function(){
   canvas = new fabric.Canvas('canvas');
}

window.addRect = function(){
    var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20,
});
    canvas.add(rect);

}

window.addCircle = function(){
    var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100
});
    canvas.add(circle);
}

这是我的。您可以单击“新建动画”，然后从现在开始添加对象

---

我希望用户选择一些对象，然后也能够删除它我不知道如何。我发现了这一点，但未能成功实施。我基本上希望用户能够选择一个对象并将其删除。

编辑：这适用于较旧的版本

您可以使用删除方法，例如

window.deleteObject = function() {
        canvas.getActiveObject().remove();
}

---

自从新版本的fabric.js发布以来，您应该使用：

canvas.remove(canvas.getActiveObject());

---

我使用的是Fabric JS 2.3.6

我想允许用户在画布上选择一个或多个对象，并通过单击delete按钮将其删除

从旧版本中删除方法

自引入ActiveSelection后，以下方法不再可用：

setActiveGroup(group);
getActiveGroup();
deactivateAll();
discardActiveGroup();
deactivateAllWithDispatch();

这是我的代码，对我来说非常有用，希望你也一样

---

删除所有选定对象：

canvas.getActiveObjects().forEach((obj) => {
  canvas.remove(obj)
});
canvas.discardActiveObject().renderAll()

---

可以使用退格键删除活动对象

$(document).keydown(function(event){
    if (event.which == 8) {
        if (canvas.getActiveObject()) {
            canvas.getActiveObject().remove();
        }
    }
});

---

其实很简单

只需使用管理对象选择，然后为选择的任何对象启动删除功能

我正在使用画布选择事件来覆盖画布上的所有对象。其想法是添加一个删除按钮，除非需要，否则将其隐藏，然后处理其在画布上的显示选择事件

借助于Fabric库的remove属性，可以轻松地进行删除，单击delete按钮时会明显触发该属性

下面是一些示例代码来演示我上面所说的内容

//抓住所需的元素 var canvas=new fabric.canvas'c'， delBtn=document.getElementById'delete' //隐藏删除按钮，直到需要 delBtn.style.display='none' //初始化矩形对象 var rect=new fabric.rect{ 左:100,， 前100名， 填充：“红色”， 宽度：100， 身高：50 } //初始化圆对象 var circle=新结构。circle{ 左：250， 前100名， 半径：20， 填充：“紫色” } //将对象添加到画布 canvas.addrect canvas.addcircle //当进行选择时 帆布{ “选择：已创建”：=>{ delBtn.style.display='inline block' } } //当选择被清除时 帆布{ '选择：清除'：=>{ delBtn.style.display='none' } } //r单击“删除”按钮移动活动对象 delBtn.addEventListener'click'，e=>{ canvas.removecanvas.getActiveObject } 身体{ 背景色：eee； 颜色：333； } c{ 背景色：fff； } 选择一个对象

---

这个答案已经过时，不适用于较新版本的Fabric.js检查@AlexAndre的答案：这只适用于一个对象。多个选定对象如何？@rostamiani，只需使用canvas.getActiveObjects；并在循环中调用canvas.remove遍历它们。类似于：while canvas.getActiveObjects.length>0{canvas.removecanvas.getActiveObject[0]；}所以当我调用canvas.removeobject函数时，在删除对象后，它不允许我向画布添加新的itext。过时了吗？这会抛出一个错误。。。它说没有调用任何函数。删除。你看不到答案发布的时间吗？已经1年了。如果你使用的是fabric js的最新版本，那是我的错。你应该遵循fabric js的最新官方文档，请遵循下面的链接啊，是的。我可以看到发布日期。。。只是一个想法。。。为什么Larry Roberston的.remove work比你的代码还要旧，甚至Alex Andre的也比你的代码还要旧。尽管如此，感谢您提供的文档链接，这非常有用；为什么是jQuery=

$(document).keydown(function(event){
    if (event.which == 8) {
        if (canvas.getActiveObject()) {
            canvas.getActiveObject().remove();
        }
    }
});