如何使用自定義 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 部分后fabricExtensions.js將其包含在內。

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

第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 4

刪除具有自定義屬性的對象非常容易。 使用 .find() 查找與您的自定義屬性值匹配的對象。 就我而言，我有一個名為“layerId”的屬性。 然后調用 canvas.remove(obj)，它應該刪除您的對象。

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

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