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

Question

I am setting an id attribute for a Group Object

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

Now, When I am serializing the canvas using

JSON.stringify(canvas);

And then reloading the Canvas using the Json Saved

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

I get OBJ ID -undefined

I checked a few solutions some involve subclassing, but since I am pretty deep in the application it won't be the best solution for me.

I tried something like

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

But it was in vain. Do I have to loop through each object in the canvas and manually add the id attribute to the json? I am sure there must be a better solution than that.

Any help in this regards would be very helpful.

Answer 1

Check out the function toObject(propertiesToInclude) on the canvas object ( fabric.js doc ). You should use this method to "export" the canvas before using JSON.stringify to serializing. The function allows you to provide a list of additional properties that should be included in the serialization.

When deserializing you just use the reviver function to set the needed property from o to obj ( obj.id = o.id ).

Putting it all together:

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