在填充完毕之前，禁止渲染fabric-js画布

Question

在FabricJS中，canvas.loadFromJSON（）似乎运行某种renderAll函数，即使未指定？由于我既要从JSON加载图像，又要从另一个函数加载图像，我希望画布在所有内容加载完毕之前保持空白，然后同时呈现所有内容。

我用简化版本创建了一个简短的提琴：https://jsfiddle.net/Xikura/cas6j7b3/168/

小提琴在图层之间切换，然后重新绘制画布，尤其是如果禁用缓存，您会看到道具本身显示，然后其余图像再出现。 一个很小的人可能会说，但是当有10到30张具有各种混合设置的图像时，加载可能要花一些时间才能开始缓存普通图像，而在早期可见的道具上移动并不能很好地解决我的问题...

我看到documentation of loadFromJSON在其回调中添加了renderAll（），而是在同一回调中触发了自己的预加载图像，以便能够添加其他图像。

if (!jsonCanvas) {
  // First load
  preload(images);
} else {
  // Loading from saved JSON
  canvas.loadFromJSON(jsonCanvas, function () {
    preload(images);
  });
}

现在我似乎无法理解为什么loadFromJSON似乎会触发某种形式的渲染，因此首先显示道具？在我自己使用renderAll（）触发渲染之前，FabricJS是否具有我可以用来阻止渲染的任何功能？

我发现一个FabricJS设置，可以认为可以解决此问题：renderOnAddRemove设置为false，它确实修复了我之前遇到的其他渲染困难，但对loadFromJSON-part没有影响。

Answer 1

所以我一整天都在处理这个问题，但是在完成我的问题之后，我决定休息一下，然后继续处理其他问题。在尝试优化我的应用程序的性能时，偶然地，我迷住了这个Improving FabricJS speed网站，这既回答了我的问题，也解决了我的问题。

通过使用 fabric.util.enlivenObjects 切换 loadFromJSON ，我可以触发自己的回调，而不是（未记录？） canvas.renderAll（ ）调用 loadFromJSON 。

  if (!jsonCanvas) {
    // First load
    preload(images);
  } else {
    // Loading from saved JSON
    fabric.util.enlivenObjects(jsonCanvas.objects, (objs) => {
      objs.forEach((item) => {
        canvas.add(item);
      });
      preload(images);
    })
  }

我更新了my fiddle以包含此修复程序。