如何使用自定义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并在将结构库加载到页面头部后立即将其包括在内。

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

该方法将允许您将ANY属性设置为对象。另外，您可以将其更改为类似这样的内容，以便仅定位您要查找的确切属性：

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

你应该这样称呼它canvas.remove(text)。或者您可以使用text.remove()或canvas.getActiveObject().remove()。