javascript - 防止 Fabric-js Canvas 渲染，直到完全填充

Question

在 FabricJS canvas.loadFromJSON() 中，即使未指定，似乎也会运行某种 renderAll 函数？由于我既从 JSON 加载图像，又从另一个函数加载一些图像，因此我希望 Canvas 保持为空，直到加载所有内容，然后同时渲染所有内容。

我创建了一个带有简化版本的短 fiddle :https://jsfiddle.net/Xikura/cas6j7b3/168/

fiddle 切换其中一个图层，然后重新绘制 Canvas ，特别是如果您禁用缓存，您可以看到 Prop 自行显示，然后稍后显示其余图像。 有人可能会说，这是相当小的，但是当有 10 到 30 个具有不同混合设置的图像时，加载可能需要一些时间，直到公共(public)图像开始被缓存，在早期可见的 Prop 上移动对我的解决方案并没有多大帮助...

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

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

现在我似乎无法理解为什么 loadFromJSON 似乎会触发某种渲染，因此首先显示 Prop ？ FabricJS 是否有任何功能可以用来阻止渲染，直到我自己使用 renderAll() 触发它？

我找到了 FabricJS 设置，人们认为它可以解决这个问题:renderOnAddRemove我将其设置为 false，它确实修复了我之前遇到的一些其他渲染困难，但对 loadFromJSON 部分没有影响。

Answer 1

所以我已经为此工作了一整天，但在完成我的问题后，我决定休息一下并继续解决其他问题。在尝试优化应用程序的性能时，我偶然发现了这个 Improving FabricJS speed -site，它既回答了我的问题，又解决了我的问题。

通过将 loadFromJSON 与 fabric.util.enlivenObjects 切换，我能够触发我自己的回调，而不是(未记录？) 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包括此修复。