kineticjs - 在循环中设置画布上多个图像的位置

Question

如何在循环中在画布上设置多个图像的位置？ 以下似乎适用于：

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每个循环迭代。

请注意，这是一个相当常见的JavaScript错误