0

私はキャンバスに小さな画像を描き、配列にあるすべての人にいくつかのテキストを描こうとしています。私はこのようにやっています

function drawPersonsOnCanvas(canvas, persons) {
    var workIcon = '../images/work.png';
    var partyIcon = '../images/party.png';

    var context = canvas.getContext('2d');
    var width = canvas.width;
    var height = canvas.height;
// randomizePositions just put every object of array on random position inside canvas
    persons = randomizePositions(persons, width, height);
    for (var i in persons) {
        var person= persons[i];

        person['image'] = new Image();
        person['image'].src = (person['type'] === 'work') ? workIcon: partyIcon;
        person['image'].onload = function() {
            context.drawImage(person['image'], person['x'], person['y']);
        };
        context.strokeText('person ' + person['status'], person['x'], person['y']);
    }
}

そして、私は常にマップ上のすべてのテキストを適切な位置に取得し、1つの画像とxとyだけがすべて異なります(配列に5人がいて、onloadなしで試しましたが、機能しません)。何を変更すればよいか知っている人はいますか？

4

1 に答える 1

1

eachonloadが実行されるまでに、person変数はすでに person の次の要素に再割り当てされています。

そのため、 内に新しい person 変数を作成する必要があります。onload

これを行うには、正しい人物を指すインデックスを person['image'] に追加します。

    …
    person['image'].index=i;
    person['image'].src = (person['type'] === 'work') ? workIcon: partyIcon;
    …

次に、onload 内で正しい人物を再作成できます。

        var person=persons[this.index];

したがって、作り直されたコードは次のようになります...そしてフィドル: http://jsfiddle.net/m1erickson/xms9B/

function drawPersonsOnCanvas(canvas, persons) {

    var workIcon = '../images/work.png';
    var partyIcon = //'../images/party.png';

    var context = canvas.getContext('2d');
    var width = canvas.width;
    var height = canvas.height;
// randomizePositions just put every object of array on random position inside canvas
    persons = randomizePositions(persons, width, height);
    for (var i in persons) {
        var person= persons[i];
        person['image'] = new Image();
        person['image'].onload = function() {
            var person=persons[this.index];
            context.drawImage(person['image'], person['x'], person['y']);
            context.strokeText('person ' + person['status'], person['x'], person['y']);
        };
        person['image'].index=i;
        person['image'].src = (person['type'] === 'work') ? workIcon: partyIcon;
    }
}
于 2013-05-03T16:56:32.090 に答える