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

Question

当所有图像都加载到画布上时，我想隐藏加载器。 目前，发生的事情不是等待加载到画布上的图像。 帮助表示赞赏。

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

Answer 1

从文档中你可以读到第三个函数被调用

在创建每个结构对象之后。

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

您可以在function(o, object)的主体内使用 counter 并检查计数器是否达到了要显示的预期图像数量，然后隐藏加载程序。

Answer 2

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

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

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

Answer 3

您需要使用 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);

由于有些歧义，我无法给你一个明确的答案，但应该沿着这条线。