如何删除带有自定义 ID 的 fabric.js 对象？

Question

我创建了一个带有一些图像和文本的 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

但它不起作用。请帮忙。

Answer 1

我已经扩展了 Fabric 库来执行类似的功能。

首先，创建一个文件 fabricExtensions.js，并在您将结构库加载到页面的 head 部分之后将其包含在内。

  <!-- 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>

在新创建的fabricExtensions.js 文件中添加以下代码：

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

这段代码的作用是让你通过分配给它的任何属性来选择一个对象。

现在，要删除对象，这应该可以工作：

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;
};

并移除对象：

canvas.fabric.getItemByMyID(myID).remove();

Answer 2

这是我实现相同功能的方法。我有两种方法，getObjectFromCanvasById 和 removeObjectFromCanvas。 getObjectFromCanvasById 需要一个 id（你在创建画布对象时设置的 id (MyID)）

getObjectFromCanvasById(id) {
    const canvasObject = window.canvas.getObjects().filter((item) => {
        return item.id === parseInt(id)
    })
    return canvasObject[0]
}

我从 removeObjectFromCanvas 方法调用此函数

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

Answer 3

使用自定义属性删除对象非常容易。使用 .find() 查找与您的自定义属性值匹配的对象。就我而言，我有一个名为“layerId”的属性。然后调用 canvas.remove(obj)，它应该会移除你的对象。

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

Answer 4

第 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();

Answer 5

你应该把它叫做canvas.remove(text)。或者您可以使用text.remove() 或canvas.getActiveObject().remove()。

Answer 6

这个答案是https://stackoverflow.com/a/32953690/1815624的返工

我想通过 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);
};

以及如何使用它

canvas.RemoveByMyID(myID);