Question

我正在尝试使用Fabric.js加载几个SVG并将它们推入阵列，以便将来访问它们。我有这个小功能，将图片“推”到阵列中。一切正常，但是，因为异步加载，我还没有真正控制特定图片所在阵列的位置。我试图找出，如何使用回调等待下一张图片加载，但这结束于一个非常长且不太灵活的程序。必须有一个更简单的解决方案。你能给我一个暗示吗？

这是迄今为止的功能：

var axles=[];

makeMySvg('holes.svg', 100, 100, changescale);



function makeMySvg(urlName, posx, posy, callback)
{
    fabric.loadSVGFromURL(urlName,

    function(objects)
    {

            var obj = new fabric.util.groupSVGElements(objects, {
              top: posx,
              left:posy,
              opacity: 1,
              scaleX: 1,
              scaleY: 1,
              objectCaching: true
            });

            canvas.add(obj);
            axles.push(obj);
            callback();

    });

}

function changescale()
{
  console.log(axles.length);
  canvas.renderAll();

}

Answer 1

您可以使用承诺和Promise.all等待加载所有照片：

var axles=[];

var images = ['hole1.svg', 'hole2.svg' ];
var promises = images.map(loadSVG);

Promise.all(promises).then(function(loadedImages) {
  var posx = 100, var posy = 100;
  loadedImages.forEach(function(img) {
    var obj = new fabric.util.groupSVGElements(img, {
      top: posx,
      left:posy,
      opacity: 1,
      scaleX: 1,
      scaleY: 1,
      objectCaching: true
    });  
    canvas.add(obj);
    axles.push(obj);
  });
  changescale();
});

makeMySvg('holes.svg', 100, 100, changescale);

loadSVG(img) {
  return new Promise(function(resolve) {
    fabric.loadSVGFromURL(urlName, function(objects) {
      resolve(objects);
    });
  });
}

function changescale()
{
  console.log(axles.length);
  canvas.renderAll();

}

如何在没有回调地狱的情况下加载图像？

1 个答案: