反序列化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(); 
});