在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); 
}