反序列化Fabric.js中的JSON对象

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