KineticJS 多个图像

Question

我遇到了 KineticJS 的一个奇怪问题。 我正在尝试加载多个图像并将它们简单地绘制在画布上。

JSFiddle 在这里： http://jsfiddle.net/riyuk/DbHuV/

奇怪的是，Kinetic 只加载一个图像（总是数组中的最后一个）。 如果我取消注释代码并对 Kinetic.Rect 执行相同操作，则一切正常。

var obj = new Kinetic.Rect({
                        x: opts.x,
                        y: opts.y,
                        width: opts.width,
                        height: opts.height,
                        fill: 'green',
                        stroke: 'black',
                        strokeWidth: 4
                    });
                    cb(obj);

任何 - 工作 - 建议？

问候

Answer 1

这是一个备用图片加载器：

这会加载所有推入 imageURLs 数组的图像。

所有图片加载完毕后，调用start()函数。

在开始时，imgs[] 数组以与 imageURLs[] 相同的顺序保存图像

// image loader

var imageURLs=[];
var imagesOK=0;
var imgs=[];
imageURLs.push("");
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){

    // the imgs[] array holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]

}