Question

我正在使用fabric.js在画布上渲染图像。尝试渲染具有不同属性的3个图像（如本地化，源代码等）。

for (i = 0; i < 3; i++) {
  // read data from XML
  // ... read: imageWidth, imageHeight, etc.

  var imageDefaults = {
    width: imageWidth,
    height: imageHeight,
    left: imageX,
    top: canvas.height - imageY,
    angle: imageRotation
  };

  console.log('outside callback fun');

  fabric.Image.fromURL(imagePath, function (image) {
    image.set(imageDefaults).setCoords();                                    
    canvas.add(image);
    console.log('inside callback fun');                 
  });
}

输出控制台日志为：

outside callback fun
outside callback fun
outside callback fun
inside callback fun
inside callback fun
inside callback fun

因此，我收到3张具有相同属性的图像（对于i == 2）。

如果只渲染图像，如何确保循环继续？我尝试在渲染图像后设置while循环，但是这个循环无限运行。

Answer 1

在for循环中添加包装函数。

for (i = 0; i < 3; i++) {
     (function(i){
      // read data from XML
      // ... read: imageWidth, imageHeight, etc.

      var imageDefaults = {
        width: imageWidth,
        height: imageHeight,
        left: imageX,
        top: canvas.height - imageY,
        angle: imageRotation
      };

      console.log('outside callback fun');

      fabric.Image.fromURL(imagePath, function (image) {
        image.set(imageDefaults).setCoords();                                    
        canvas.add(image);
        console.log('inside callback fun');                 
      });
     })(i);
    }

Answer 2

尝试递归解决方案：

function SetImageUrl(index, maxIndex, callback){
    ...

    var imageDefaults = {
      width: imageWidth,
      height: imageHeight,
      left: imageX,
      top: canvas.height - imageY,
      angle: imageRotation
    };

    console.log('outside callback fun');

    fabric.Image.fromURL(imagePath, function (image) {
      image.set(imageDefaults).setCoords();                                    
      canvas.add(image);
      console.log('inside callback fun');
      if(index < maxIndex){
           callback(index++, maxIndex, callback);
      }

  });
}

用法：

SetImageUrl(0, 3, SetImageUrl);

回调函数执行得太晚了

2 个答案: