Javascript 如何删除具有自定义id的fabric.js对象？

我创建了一个fabric.js画布编辑器，其中包含一些图像和文本。但我想跟踪添加的图像或文本。这就是为什么我在添加此对象时提供myId。但是如何删除具有此自定义id的对象

下面是我添加文本的代码

var text = new fabric.Text(txt, { left: 30, top: 0, fill: "#"+col , fontFamily: family, id:MyID });
canvas.setActiveObject(text);
canvas.add(text);  

这里myID是我的自定义id

但是如何使用这个myID删除这个文本呢？ 我试过了

canvas.remove(get_myID); //where get_myID is provided id by code

---

但它不起作用。请帮助。

您应该像调用画布一样调用它。删除（文本）。或者您可以使用

text.remove（）

或

canvas.getActiveObject（）.remove（）

我已经扩展了结构库来执行类似的功能

首先，创建一个文件，

fabricExtensions.js

，并在页面的头部加载fabric库之后将其包括在内

  <!-- Load FabricJS Library -->
  <script type="text/javascript" src="fabric.min.js"></script>
  <!-- Load FabricJS Extension file -->
  <!-- ** Load this file in the HEAD AFTER loading FabricJS** -->
  <script type="text/javascript" src="fabricExtensions.js"></script>

这段代码的作用是，它允许您通过指定给对象的任何属性来选择对象

现在，要删除该对象，应该可以执行以下操作：

canvas.fabric.getItemByAttr('id', myID).remove();

---

该方法将允许您以对象的任何属性集为目标。或者，您可以将其更改为类似以下内容，以仅针对您要查找的确切属性：

fabric.Canvas.prototype.getItemByMyID = function(myID) {
    var object = null,
        objects = this.getObjects();
    for (var i = 0, len = this.size(); i < len; i++) {
        if (objects[i].id&& objects[i].id=== myID) {
            object = objects[i];
            break;
        }
    }
    return object;
};

---

下面是我实现相同功能的方法。我有两个方法，getObjectFromCanvasById和removeObjectFromCanvas。 getObjectFromCanvasById接受一个id（创建画布对象时设置的id（MyID））

我从removeObjectFromCanvas方法调用此函数

removeObjectFromCanvas(objectId) {
    const canvasObject = this.getObjectFromCanvasById(objectId)
    window.canvas.remove(canvasObject)
}

步骤1：

// to get object properties

console.log(canvas.getObjects());

步骤2：

canvas.item(1).visible = true;

//by the reference of index number item(index number here).visible = true or false

步骤3：

canvas.renderAll();

---

这个答案是重复的

我想按id删除该项…我认为自从原始答案给出后，情况发生了一些变化，现在您可以删除类似以下内容的项

canvas.remove（object）

这是密码

fabric.Canvas.prototype.RemoveByMyID = function(myID) {
    var object = null,
        objects = this.getObjects();
    for (var i = 0, len = this.size(); i < len; i++) {
        if (objects[i].id&& objects[i].id=== myID) {
            object = objects[i];
            break;
        }
    }
    canvas.remove( object);
};

移除具有自定义属性的对象非常容易。使用.find（）查找与自定义属性值匹配的对象。在我的例子中，我有一个属性叫做“layerId”。然后调用canvas.remove（obj），它将删除您的对象

let obj = canvas.getObjects().find(obj => obj.layerId === customId);
canvas.remove(obj);

不，我想通过我的自定义id删除它。。有可能吗？@Softcare，canvas.getActiveObject（）.remove（）

？实际上我想通过不选择任何层来实现这一点。。只要按一下按钮。。这个按钮存储我的自定义id..@Softcare，那么使用

canvas.getObjects（）

并检查每次迭代是否

it.id==myId

？

for（var i=0；i

great post one comment-调用脚本canvas.getItemByAttr（'id'，myID）.remove（）；我喜欢这个答案。不错的扩展，非常干净！我正在使用canvas.getItemByAttr（'configId'，configId）.remove（）调用

canvas.remove（canvas.getItemByMyID（myID））

而不是

canvas.fabric.getItemByMyID（myID.remove（）

至少为imagesHello Austin工作过，也许您可以让OP了解您的代码？为什么你提供的答案是一个好答案？它是如何解决OP提出的问题的？通过逻辑引导OP，让他们理解你写的内容。是的，我同意@Daelandry。高代表性用户可以删除“仅代码”答案。谢谢

canvas.renderAll();

fabric.Canvas.prototype.RemoveByMyID = function(myID) {
    var object = null,
        objects = this.getObjects();
    for (var i = 0, len = this.size(); i < len; i++) {
        if (objects[i].id&& objects[i].id=== myID) {
            object = objects[i];
            break;
        }
    }
    canvas.remove( object);
};

canvas.RemoveByMyID(myID);

let obj = canvas.getObjects().find(obj => obj.layerId === customId);
canvas.remove(obj);