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

第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删除项目...我认为自从给出原始答案以来，情况已经发生了一些变化，现在您要删除类似branch-a> git fetch origin master branch-a> git rebase -i origin/master branch-a> git push -f

的项目

这是代码

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

如何使用自定义ID删除fabric.js对象？

6 个答案: