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，并在循环内添加多个yodas，如下所示：

一个演示：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';