0

KineticJS で奇妙な問題が発生しました。複数の画像を読み込んでキャンバスに描画しようとしています。

JSFiddle はこちら: http://jsfiddle.net/riyuk/DbHuV/

奇妙なことに、Kinetic は 1 つの画像 (常に配列の最後の画像) のみをロードします。コードのコメントを外し、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);

何か - 有効な - 提案はありますか?

ご挨拶

4

1 に答える 1

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[]

}
于 2013-11-05T17:02:23.033 に答える