Deserialize объект JSON в Fabric.js

Question

Я разрабатываю совместную доску с использованием fabricjs. Когда пользователь создает новый объект, я сериализую его и отправляю его всем другим пользователям.

var rect = new fabric.Rect(); 
canvas.add(rect); 
socket.emit("newObject", JSON.stringify(rect)); // sends the object to other users 

Когда эти пользователи получают сериализованный объект, его следует десериализовать и добавить на свой холст. Каков наилучший способ сделать это? Я не был в состоянии найти функцию, которая Десериализует один объект, только весь холст (loadFromJSON), так что я осуществил unelegant решения:

function drawRoomObjects(roomObjects){ 
    var canvasString = "{\"objects\":["; 
    for(var roomObjectKey in roomObjects){ 
    canvasString += roomObjects[roomObjectKey]; 
    } 
    canvasString += "], \"background\":\"\"}"; 
    var tmpCanvas = new fabric.Canvas(); 
    tmpCanvas.loadFromJSON(canvasString); 
    for(var k in tmpCanvas.getObjects()) { 
    canvas.add(tmpCanvas._objects[k]); 
    } 
    canvas.renderAll(); 
} 

Любые предложения для лучшего способа сделать это?

Answer 1

Вы можете использовать fabric.util.enlivenObjects для десериализации объектов json. После того, как все объекты десериализации вы должны добавить их:

objects.forEach(function(o) { 
    canvas.add(o); 
}); 

Вот полный пример - заменить obj1, obj2 с объектами. Пример также доступен по адресу jsfiddle.

fabric.util.enlivenObjects([obj1, obj2], function(objects) { 
    var origRenderOnAddRemove = canvas.renderOnAddRemove; 
    canvas.renderOnAddRemove = false; 

    objects.forEach(function(o) { 
    canvas.add(o); 
    }); 

    canvas.renderOnAddRemove = origRenderOnAddRemove; 
    canvas.renderAll(); 
});