JSON.stringify（）無法保存對象ID結構JS

Question

我正在為組對象設置id屬性

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

現在，當我使用

JSON.stringify(canvas);

然后使用保存的Json重新加載Canvas

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

我得到OBJ ID-未定義

我檢查了一些涉及子類化的解決方案，但是由於我對應用程序非常了解，因此它並不是我的最佳解決方案。

我嘗試了類似的東西

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

但這是徒勞的。 我是否必須遍歷畫布中的每個對象，然后將id屬性手動添加到json？ 我敢肯定，有比這更好的解決方案。

在這方面的任何幫助將非常有幫助。

Answer 1

在canvas對象（ fabric.js doc ）上toObject(propertiesToInclude)出函數toObject(propertiesToInclude) ）。 在使用JSON.stringify進行序列化之前，應該使用此方法“導出” canvas 。 該函數允許您提供序列化中應包括的其他屬性列表。

反序列化時，只需使用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
    }
});