在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），所以我實現了一個不優雅的解決方案：

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