Question

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

我无法在文档中的任何位置找到解释如何执行此操作的内容，我尝试在这样的对象中添加ID：

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

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

Answer 1

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

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

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

向Fabric.js元素添加ID

2 个答案: