如何等待所有图像从 loadfromjson 加载到 fabric js 中的 canvas？

Question

我想在 canvas 上加载完所有图像后隐藏加载程序。目前，它没有等待 canvas 上加载的图像。感谢帮助。

loader.show();
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
   loader.hide();
});

Answer 1

您需要使用 Promise.all()，例如：

function loadImg(json){
   return new Promise((resolve,reject)=>{
      canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
         resolve();
      })
   });
}

然后：

loader.show();
Promise.all(jsonArr.map(loadImg)).then(loader.hide);

由于有些含糊，我无法给你一个明确的答案，但应该是这样的。

Answer 2

从docs你可以读到调用了第三个函数

after each fabric object created.

所以它会在加载第一个图像时隐藏加载器。

您可以在 function(o, object) 的正文中使用计数器并检查计数器是否达到了预期显示的图像数量，然后隐藏加载器。

Answer 3

该方法支持回调，您正在使用 canvas.renderAll.bind(canvas) 不要调用该函数，而是调用您自己的函数来呈现和隐藏加载程序。

loader.show();
canvas.loadFromJSON(json, function() {
   canvas.renderAll();
   loader.hide();
});

第三个函数仅用于在初始化后处理每个对象，每个对象调用一次。

如何等待所有图像从 loadfromjson 加载到 fabric js 中的 canvas？

How to wait for all images are loaded from loadfromjson to canvas in fabric js?

javascript

fabricjs