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

Question

我创建了一个带有一些图像和文本的 fabric.js Canvas 编辑器。但我想跟踪添加的图像或文本。这就是为什么我在添加此对象时提供 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 并在您将结构库加载到页面的头部后立即包含它。

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