Javascript 将ID添加到Fabric.js元素

Javascript 将ID添加到Fabric.js元素,javascript,html,canvas,html5-canvas,fabricjs,Javascript,Html,Canvas,Html5 Canvas,Fabricjs,我正在使用Fabric.js库在画布中创建一个“类似地图”的应用程序。我基本上是把一张图片放下来,然后在图片的上面用正确的坐标画圆圈。点的位置和名称作为从ajax调用接收到的JSON数据显示出来。我需要一种方法来引用任何一个圆圈,这样我就可以获取关于该圆圈的更多信息(每个圆圈都有一个包含更多详细信息的弹出窗口) 我在文档中找不到解释如何执行此操作的任何地方,我已尝试向如下对象添加ID: tokens.add(newfabric.Circle({半径:25,填充:'#f55',顶部:100,左侧:

我正在使用Fabric.js库在画布中创建一个“类似地图”的应用程序。我基本上是把一张图片放下来,然后在图片的上面用正确的坐标画圆圈。点的位置和名称作为从ajax调用接收到的JSON数据显示出来。我需要一种方法来引用任何一个圆圈,这样我就可以获取关于该圆圈的更多信息(每个圆圈都有一个包含更多详细信息的弹出窗口)

我在文档中找不到解释如何执行此操作的任何地方,我已尝试向如下对象添加ID:

tokens.add(newfabric.Circle({半径:25,填充:'#f55',顶部:100,左侧:70,id:“foo”}))


没有运气找回它。任何帮助都将不胜感激。这也是我第一次与这个社区互动,如果我的问题不够详细,或者存在其他问题,我深表歉意。

您可以使用fabric.object.prototype添加属性。 因此,添加:

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

您可以扩展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
    });

我在这里回答了一个类似的问题-我能够让它工作,谢谢。请检查以下内容: