在for循环中绘制Kinetic.Shape - for循环中的var i在drawFunc（）中没有正确使用

Question

是否可以使用for循环（for(i=0; i<3; i++)）中的变量i（其中Kinetic.Shape创建为设置的y值在自定义drawFunc();

我的for循环的动态形状创造看起来下面的代码：

var layer = new Kinetic.Layer(); 

for (i = 0; i < 3; i++){ 
    layer.add(new Kinetic.Shape({ 
     x: 0, 
     y: 0, 
     width: 400, 
     height: 400, 
     drawFunc: function(canvas){ 
      console.log(i); //THIS LOG ALWAYS OUTPUTS THE MAX i-VALUE (here 3) 
      var ctx = canvas.getContext(); 
      ctx.beginPath(); 
      ctx.fillStyle = 'black'; 
      ctx.fillRect(10, i*30+2, 200, 30); 
      ctx.closePath(); 
      ctx.fill(); 
     } 
    })); 
} 

stage.add(layer); 

如果我在自定义日志i - 值drawFunc();结果总是3而不是0, 1, 2，因为ctx.fillRect绘制所有三个形状在y = 92。

Here是我的代码与解释行为的小提琴。

我错过了一些明显的东西吗？任何帮助是极大的赞赏。

Answer 1

你可以尝试这样的事情。通过使用函数添加图层，传递给createLayer函数的值将与通过闭包创建的每个Kinetic.Shape对象一起保存。

function createLayer(nbr){ 
    layer.add(new Kinetic.Shape({ 
     x: 0, 
     y: 0, 
     width: 400, 
     height: 400, 
     drawFunc: function(canvas){ 
      console.log(nbr); 
      var ctx = canvas.getContext(); 
      ctx.beginPath(); 
      ctx.fillStyle = 'black'; 
      ctx.fillRect(10, nbr*30+2, 200, 30); 
      ctx.closePath(); 
      ctx.fill(); 
     } 
    })); 
    } 


for (var i = 0; i < 3; i++){ 
    createLayer(i); 
}