KineticJS不會繪製多個圖像

Question

我想在循環中使用for循環在畫布上繪製多個圖像。 由於某種原因，它僅在最後位置顯示圖像。

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script> 
<div id="container"></div> 
<script defer="defer">  
var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 578, 
    height: 200 
}); 
var layer = new Kinetic.Layer(); 

// add the layer to the stage 
stage.add(layer); 

for (var i=0; i<5; i++) { 
    var imageObj = new Image(); 
    imageObj.onload = function() { 
     var yoda = new Kinetic.Image({ 

      x: 100*i, 
      y: 50, 
      image: this, 
      width: 106, 
      height: 118 
     }); 

     // add the shape to the layer 
     layer.add(yoda); 
     stage.draw(); 

    }; 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'; 
} 
</script> 

JSFiddle

Answer 1

問題是，你打算重用var imageObj一個循環中。

在加載第一個圖像之前，imageObj在循環的下一步中被覆蓋。

所以完全加載imageObj外循環並添加多個yoda就像這個循環中：

演示：http://jsfiddle.net/m1erickson/uK4DW/

var imageObj = new Image(); 
imageObj.onload = function() { 
    for (var i=0; i<5; i++) { 
     var yoda = new Kinetic.Image({ 
      x: 100*i, 
      y: 50, 
      image:imageObj, 
      width: 106, 
      height: 118 
     }); 
     layer.add(yoda); 
     layer.draw(); 
    }; 
} 
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';