FabricJs：存储和加载画布状态被动

Question

使用Meteor和React，我正在构建一个在中间有一个织物画布的应用程序，左边是一个'组件面板'（一个要添加到画布上的对象库），以及一个'层面板'右（类似于Photoshop，画布上的每个对象都表示为具有特定控件的图层，如颜色，不透明度等）。

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

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

到目前为止，这种方法运行良好，但我现在想要实现分组功能。虽然单独使用fabric.js很容易做到这一点，但我无法在图层面板上表示组的确切状态。它需要以树格式显示，其中嵌套组和项目位于其他对象内/下。

我还需要对图层面板进行排序。

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

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

因此，为了实现这一点，我试图在画布上发生任何更改后将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);

我在控制台中看到了阵列。

为什么它能够记录数组但无法将其存储到会话变量中？

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

提前致谢。