如何恢复/重用json序列化对象？

Question

我正在尝试用socket.io和fabric.js创建一个协作白板。

当用户绘制一些东西时，我以JSON格式将路径发送给其他用户：

canvas.on('path:created', function(e) {
  canvas.remove(fabric.Path.fromObject(JSON.stringify(e.path)));
  socket.emit('add path', e.path.toJSON());
});

我如何在这里的画布上重新创建这个对象？

socket.on('add path', function(path) {
  canvas.add(path); // doesn't work
});

Answer 1

尝试使用fabric.util.enlinvenObjects

该函数的目的是从对象形式切换到静态函数。

socket.on('add path', function(path) {
  fabric.util.enlivenObjects([path], function(objects) {
    objects.forEach(function(o) {
      canvas.add(o);
    });
  });
});

Answer 2

对于那些在TypeScript项目中调用此函数的人..。在我的例子中，将namespace设置为空字符串('')，并显式键入回调参数，可以使函数顺利工作。

fabric.util.enlivenObjects(
        action.payload.objects,
        (enlivedObjects: fabric.Object[]) => {
          canvas.add(...enlivedObjects);
          canvas.renderAll();
        },
'');