javascript - Kineticjs - 在循环内设置 Canvas 上多个图像的位置

Question

如何在循环内设置 Canvas 上多个图像的位置？以下似乎适用于:

for (var i=1; i<10; i++) {
  images[i]=new Image();
  images[i].onload = function() {
    drawImage(this, 1, 1, i*50, 700, "bulb"+i);
    // THE POSITION CANNOT BE SET ; i IS ALWAYS 500
  }
  images[i].src = folder+src[i];
}

Answer 1

在您的示例中，i 在函数外部有闭包，因此它的值与循环末尾的值相关联。

你可以这样修复它:

for (var i=1; i<10; i++) {
  images[i]=new Image();
  images[i].onload = (function(x) {
    return function () {
      drawImage(this, 1, 1, x*50, 700, "bulb"+x);
    };
  }(i));
  images[i].src = folder+src[i];
}

这为每个 onload 函数创建一个新的闭包，并将其分配给每个循环迭代的 x。

请注意，这是一个相当 common JavaScript error