Deserializar un object JSON en Fabric.js

Estoy desarrollando una pizarra queueborativa usando fabricjs. Cuando un usuario crea un nuevo object de estructura, lo serializo y lo envío a todos los demás usuarios.

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

Cuando esos usuarios reciben el object serializado, se debe deserializar y agregar a su canvas. ¿Cuál es la mejor manera de hacer esto? No pude encontrar una function que deserializara un solo object, solo todo el canvas (loadFromJSON), así que implementé una solución poco elegante:

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

¿Alguna sugerencia para una mejor manera de hacerlo?

Puede usar fabric.util.enlivenObjects para deserializar los objects json. Después de que todos los objects estén deserializados, debes agregarlos:

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

Aquí está el ejemplo completo: reemplace obj1, obj2 con sus objects. El ejemplo también está disponible en 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(); });