Javascript FabricJs：以反应方式存储和加载画布状态 使用流星和反应，我正在构建一个在中间有织物画布的应用程序，左边是一个“组件面板”（一个要添加到画布的对象库），右边是一个“图层面板”（类似于PS图象处理软件，画布上的每一个对象都被表示为具有颜色、不透明性等特定控件的层）。p>

到目前为止，我已经通过使用Meteor会话变量来显示Layers面板，该变量包含画布上对象的数组

因此，每次我对画布上的任何对象添加、删除、调整或进行任何功能更改时，我也会在会话变量数组中手动调整该对象

到目前为止，这已经很好地工作了，但是我现在想要实现分组功能。虽然仅使用fabric.js很容易做到这一点，但在层面板上表示组的确切状态时遇到了问题。它需要以树格式显示，其中嵌套的组和项位于其他对象内/下

我还需要有层面板排序以及

使用fabric，我们可以将一组对象分组，将另一组对象分组，然后将两组对象分组在一起。这变得相当复杂，并且很快成为使用我上面描述的方法进行维护的噩梦

所以现在我想，让图层面板直接从画布上查看对象数据（反应式）会容易得多。这样，我就不需要维护第二个数组并手动匹配发生的每个更改。然后我可以用类似的东西

因此，为了实现这一点，我尝试在画布上发生任何更改后，将

canvas.getObjects（）

的副本存储到Meteor会话变量中

canvas.on({
    'after:render': function() {
       var canvasObjects = [];
       var objects = canvas.getObjects();
       objects.forEach(object=>{
         canvasObjects.push(object);
       });
       Session.set('canvasObjects', canvasObjects);
    }
});

我得到以下错误，虽然

TypeError: callback is not a function
    at modules.js?hash=d9804d9fae07a146610fc3c3c610d3e79bf33006:261816
    at onLoaded (modules.js?hash=d9804d9fae07a146610fc3c3c610d3e79bf33006:244313)
    at modules.js?hash=d9804d9fae07a146610fc3c3c610d3e79bf33006:244337
    at modules.js?hash=d9804d9fae07a146610fc3c3c610d3e79bf33006:257179
    at onLoaded (modules.js?hash=d9804d9fae07a146610fc3c3c610d3e79bf33006:244357)
    at modules.js?hash=d9804d9fae07a146610fc3c3c610d3e79bf33006:244379
    at Array.forEach (<anonymous>)
    at Object.enlivenPatterns (modules.js?hash=d9804d9fae07a146610fc3c3c610d3e79bf33006:244370)
    at Function.fabric.Object._fromObject (modules.js?hash=d9804d9fae07a146610fc3c3c610d3e79bf33006:257171)
    at Function.fabric.Path.fromObject (modules.js?hash=d9804d9fae07a146610fc3c3c610d3e79bf33006:261457)

用这句话

Session.set('canvasObjects', canvasObjects);

console.log(canvasObjects);

我看到控制台上打印的阵列

为什么它能够记录阵列，但无法将其存储到会话变量中

这是个好主意吗？我觉得这会对表现不利。是否有其他方法可以使画布状态和层面板与我想要的所有属性（可见性、不透明度、填充、锁定、索引、组层次结构等）保持同步

---

提前感谢。

会话变量对此不起作用。如果不是托管收藏，我会推荐一个。本地集合是仅存在于客户端上的mongo集合。托管收藏将与应用程序后面的mongo数据库同步。是的，我以前在使用Meteor and blaze构建应用程序的另一个版本中使用本地收藏进行过同步。它确实工作得很好，但我很难让本地收藏与React（缺乏React知识）一样工作。但是，如何将会话变量或本地集合与画布的真实和当前状态同步，而不是尝试手动匹配所有内容？谢谢，我认为您的

中已经有了基本的同步：render

-尽管您的错误消息很奇怪；您已经非常清楚地将函数定义为

forEach