向 Fabric.js 元素添加 ID答案

【问题标题】：Adding IDs to Fabric.js elements向 Fabric.js 元素添加 ID
【发布时间】：2012-07-11 06:27:29
【问题描述】：

我正在使用 Fabric.js 库在 Canvas 中创建一个“类似地图”的应用程序。我基本上把图像放下，然后用正确的坐标在图像顶部放置圆圈。点位置和名称作为从 ajax 调用接收到的 JSON 数据传入。我需要一种方法来引用任何单个圈子，以便我可以获取有关该圈子的更多信息（每个圈子都有一个包含更详细信息的弹出窗口）。

我在文档中找不到解释如何执行此操作的任何地方，我尝试将 ID 添加到这样的对象：

tokens.add(new fabric.Circle({ radius: 25, fill: '#f55', top: 100, left: 70, id: "foo" }));

没有运气检索它。任何帮助将不胜感激。这也是我与这个社区的第一次互动，所以如果我的问题不够详细，或者还有其他问题，我深表歉意。

【问题讨论】：

我在这里回答了一个类似的问题 — stackoverflow.com/questions/11272772/…
我已经成功了，谢谢。
检查这个：github.com/kangax/fabric.js/wiki/…

标签： javascript html canvas html5-canvas fabricjs

【解决方案1】：

您可以使用 fabric.object.prototype 添加属性。所以，添加：

fabric.Object.prototype.uid = ... ;

【讨论】：

【解决方案2】：

您可以扩展 fabric.Object 类并添加您自己的属性但最简单的方法是使用fabric.util.Object.extend()。您可以添加任意数量的自定义属性并使用object.toObject().id 访问它。

    extend(object, prop) {
        object.toObject = ((toObject) => {
            return function () {
                return fabric.util.object.extend(toObject.call(this), prop);
            };
        })(object.toObject);
    }

然后

    this.extend(line , {
            customType:'ArrowLine',
            id:this.randomId(),
            CommentId:activeObject.toObject().id, extensionId
    });

【讨论】：