FabricJs自定义属性SVG奇怪的行为

Question

我想为画布中的每个对象添加自定义属性。我是这样做的：

fabric.Object.prototype.toObject = (function (toObject) {
    return function () {
        return fabric.util.object.extend(toObject.call(this), {
            zzz: this.zzz
        });
    };
})(fabric.Object.prototype.toObject);

之后我将每个对象的zzz属性设置为100：

fabric.Object.prototype.zzz = 100;

在此之后，我在画布里放了一个文字：

var text = new fabric.Text("time", {fill: '#999', zzz: 85, top: 50});
canvas.add(text);

然后我放入一个SVG（通过点击一个按钮添加svg [可能不重要]）：

fabric.loadSVGFromURL(link, function (objects, options) {
    var group = fabric.util.groupSVGElements(objects, options);
    group.set({
        ...,
        zzz: 88
    });
    canvas.add(group);
    canvas.renderAll();
});

现在，如果我做console.log(selectedObject.zzz);，我的文字为85，SVG为88。一切都很棒。但是......如果我这样做：

myjson = JSON.stringify(canvas);
console.log(myjson);

然后加载这个Json，然后加载console.log(selectedObject.zzz);我获得了85个文本和100个SVG。但是SVG中没有zzz属性（由于fabric.Object.prototype.zzz = 100它有100个）但是每个路径都有zzz属性，值为100; （首先当SVG有88个路径时，里面没有zzz属性）。

json之后带有SVG的图像:(没有zzz属性）

在json之后使用SVG路径的图像:(每条路径的zzz属性）

我的问题是如何在Json之后在SVG中获得属性zzz并获得console.log(selectedObject.zzz);的88值？该物业以某种方式丢失，但我不知道为什么。

谢谢

Answer 1

如果你想对canvas进行字符串化并保留自定义属性，你必须告诉fabric这样做：

canvas.toJSON（[ 'ZZZ']）