Question

我正在为Group Object设置id属性

group.id = "N";
canvas.add(group);
canvas.renderAll();

现在，当我使用

序列化画布时

JSON.stringify(canvas);

然后使用Json Saved

重新加载Canvas

canvas.loadFromJSON(canvas_json , canvas.renderAll.bind(canvas) , function(o , obj)
{
    if(obj.type == 'group')
    {
       console.log('OBJ ID -'+obj.id);
    }
});

我得到 OBJ ID -undefined

我检查了一些涉及子类化的解决方案，但由于我对应用程序非常深入，因此它不会成为我的最佳解决方案。

我试过像

这样的东西

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

但这是徒劳的。我是否必须遍历画布中的每个对象并手动将id属性添加到json？我相信必须有一个更好的解决方案。

这方面的任何帮助都会非常有帮助。

Answer 1

查看toObject(propertiesToInclude)对象（fabric.js doc）上的canvas函数。您应该使用此方法来导出＆＃34;导出＆＃34;在使用canvas序列化之前JSON.stringify。该函数允许您提供应包含在序列化中的其他属性列表。

反序列化时，只需使用reviver函数将所需属性从o设置为obj（obj.id = o.id）。

全部放在一起：

var canvas, group; // your canvas and group objects
group.id = 'N';
canvas.add(group)
canvas.renderAll();

var canvasJson = JSON.stringify(canvas.toObject(['id']));

canvas.loadFromJSON(canvasJson, canvas.renderAll.bind(canvas), function(jsonObject, fabricObject) {
    // jsonObject is the object as represented in the canvasJson
    // fabricObject is the object that fabric created from this jsonObject
    if (fabricObject.type === 'group') {
        fabricObject.id = jsonObject.id
    }
});

JSON.stringify（）无法保存对象ID Fabric JS

1 个答案: