防止在完全填充之前渲染 fabric-js 画布答案

【问题标题】：Prevent render of fabric-js canvas until fully populated防止在完全填充之前渲染 fabric-js 画布
【发布时间】：2019-08-09 13:26:46
【问题描述】：

在 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 似乎触发了某种渲染，所以道具首先显示？ FabricJS 是否有任何功能可以用来阻止渲染，直到我自己使用 renderAll() 触发它？

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

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

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

通过用 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 以包含此修复程序。

【讨论】：