Draw Kinetic.Shape in for-loop - var i for-loop не выполняется должным образом в drawFunc()

Question

Возможно ли использовать переменную i для цикла (for(i=0; i<3; i++)), в котором создается Kinetic.Shape установить у-значения в обычае drawFunc();

Мой код для-петли для создания динамической формы выглядит следующим образом:

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 -Value в обычае 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); 
}