如何在fabricjs中恢复/重用json序列化对象？答案

【问题标题】：How to restore/reuse json serialized objects in fabricjs?如何在fabricjs中恢复/重用json序列化对象？
【发布时间】：2016-05-12 03:40:46
【问题描述】：

我正在尝试使用 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
});

【问题讨论】：

标签： json socket.io fabricjs

【解决方案1】：

尝试使用fabric.util.enlinvenObjects

该功能的目的是从物体形式切换到物体形式。

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

【讨论】：

效果很好，谢谢！但是，相同的路径（json 格式）不适用于canvas.remove()，您将如何从 json 格式中删除路径？
canvas.remove(fabric.Path.fromObject(JSON.stringify(e.path)));你的意思是？

【解决方案2】：

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

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

【讨论】：