Уничтожьте объект JSON в Fabric.js

Я разрабатываю совместную доску с использованием 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();
}

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

Ответы

Ответ 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();
});