Question

我对KineticJS有一个奇怪的问题。我正在尝试加载多个图像，只需在Canvas上绘制它们。

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

奇怪的是，Kinetic只加载一个Image（总是数组中的最后一个）。如果我取消注释代码并对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[]

}

KineticJS多个图像

1 个答案: