阻止渲染 fabric-js canvas 直到完全填充

Question

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

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

fiddle 切换其中一层然后重绘 canvas，特别是如果您禁用缓存，您可以看到道具自己显示，然后图像的其余部分有点之后。有人可能会说相当小，但是当有 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，它确实解决了我之前遇到的其他一些渲染问题，但对 loadFrom[ 没有影响=32=]-part.

Answer 1

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

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

阻止渲染 fabric-js canvas 直到完全填充

Prevent render of fabric-js canvas until fully populated

javascript

fabricjs

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

阻止渲染 fabric-js canvas 直到完全填充

Prevent render of fabric-js canvas until fully populated

javascript

fabricjs

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

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