0

配列内の3つの画像をループして、ステージに追加しようとしています（easelJSを使用）。私も配置したいです。配列内の画像にアクセスしようとすると、未定義のxを設定できないというエラーが表示されます。easeljsビットマップのx変数にアクセスできないのはなぜですか？

function displayPosters() {

    getPosters(); //get all images and assign it to designated array

            console.log(frontPosters);
            console.log(frontPosters.length);

    if(currentCat == Category.HOME) { //if current category is HOME

        for(var i = 0; i < frontPosters.length; i++) { //loop through posters

            frontPosters[i].x = 40; //set x position for testing, also where error occurs
            stage.addChild(frontPosters[i]); //add poster to stage

        }

    }

}

これらの画像をロードしてfrontPostersarrrayにプッシュするためのコードは次のとおりです。

var frontPosters = new Array(3);

function getPosters() {

    var games = new Image(); //create 3 images
    var apps = new Image();
    var aboutme = new Image();

    games.onload = function() { //add image to frontImages array on load

        var gamesPost = new createjs.Bitmap(games);
        frontPosters[0] = gamesPost;

    };

    apps.onload = function() {

        var appPost = new createjs.Bitmap(apps);
        frontPosters[1] = appPost;

    };

    aboutme.onload = function() {

        var amPost = new createjs.Bitmap(aboutme);
        frontPosters[2] = amPost;

    };

    games.src = "images/assets/posters/games_poster.jpg"; 
    apps.src = "images/assets/posters/apps_poster.jpg";
    aboutme.src = "images/assets/posters/aboutme_poster.jpg";

}
4

1 に答える 1

1

値（別名配列自体）ではなく、for(poster in frontPosters)実際には配列オブジェクトを反復処理しているため、使用はお勧めできません。for(var i=0; i<frontPosters.length; i++)代わりに使用してください。これが最も簡単なソリューション、IMOです。

for(var i = 0; i < frontPosters.length; i++) { //loop through posters
    frontPosters[i].x = 40; //set x position for testing, also where error occurs
    stage.addChild(frontPosters[i]); //add poster to stage
}

編集

あなたは競合状態を扱っていると思います。すべての画像が読み込まれる前に、配列を調べています。設定することにより、新しい配列にプッシュされるvar frontPosters = new Array(3);3つの値を自動的に設定します。undefined

スクリプトを続行する前に、すべてのイメージがロードされたことを確認する必要があります。

これがあなたのためのアイデアです。3番目の画像が読み込まれた後にのみ実行されるコールバックを設定します。

var frontPosters = new Array(3);

function getPosters(callback) {

    var games   = new Image(),
        apps    = new Image(),
        aboutme = new Image(),
        loaded  = 0;

    games.onload = function() {
        frontPosters[0] = new createjs.Bitmap(this);
        if (++loaded === 3) callback();
    };

    apps.onload = function() {
        frontPosters[1] = new createjs.Bitmap(this);
        if (++loaded === 3) callback();
    };

    aboutme.onload = function() {
        frontPosters[2] = new createjs.Bitmap(this);
        if (++loaded === 3) callback();
    };

    games.src   = "images/assets/posters/games_poster.jpg"; 
    apps.src    = "images/assets/posters/apps_poster.jpg";
    aboutme.src = "images/assets/posters/aboutme_poster.jpg";

}

function displayPosters() {

    getPosters(function() {
        if(currentCat == Category.HOME) { //if current category is HOME
            for(var i = 0; i < frontPosters.length; i++) { //loop through posters
                frontPosters[i].x = 40; //set x position for testing, also where error occurs
                stage.addChild(frontPosters[i]); //add poster to stage
            }
        }
    }); //get all images and assign it to designated array, only after all images were loaded

}
于 2013-02-21T23:44:32.717 に答える