1

HTML5 キャンバスを使用して組織構造を描画しています。各ノードには画像が含まれており、その URL はデータベースから取得されます。画像の読み込みを処理し、読み込まれたキャンバスに画像を追加する小さな関数があります。次のようになります (重要な点は、イメージに追加された onload リスナーであることに注意してください)。

(function (i, ctx, DrawId) {
    var img = new Image();
    img.src = REPORT.Structures[i].Managers[j].Employee.PhotoUrl; //get URL from object constructed elsewhere      
    img.onload = function () { //attach onload event          
            ctx.drawImage(img, x, y, width, height);//draw image on the canvas. x, y width and height are calculated inside the onload, but I have removed the calculations to improve readability
        }
    }
})(i, ctx, REPORT.DrawId);

これはうまく機能しますが、読み込みが完了するとすべての画像がランダムに表示されます。とてもだらしなく見えます。

これをより滑らかに見せる方法を探しています。私の最初の本能は、フェードイン効果を作成しようとすることですが、キャンバスを何度も再描画せずにこれを行う方法を考えることができません.

私はこのようなことをしようと考えました:

img.onload = function () {
    var counter = 1;
    var width = 30 * REPORT.ZoomLevel;
    var height = 30 * REPORT.ZoomLevel;
    function fadeInImage(ctx, img, x, y, width, height) {
        ctx.globalAlpha = 0.1 * counter;
        ctx.drawImage(img, x, y, width, height);
        counter++;
        if (counter == 10)
            clearTimeout(fadeInImageTimeout);
        console.log(counter);
    }
    var fadeInImageTimeout = setInterval(function () { fadeInImage(ctx, img, x, y, width, height); }, 100);
}

これは機能しますが、そうすると処理が重くなりすぎることも心配です。

誰かがこのようなことを試しましたか? どんな提案でも大歓迎です。

PS: 現在、すべての画像を描画する間隔を 1 つだけにすることを検討しています。各画像は配列にプッシュされ、すべての画像が読み込まれると、配列内のすべての要素が描画されます。最新情報をお届けします。

PPS: 上記の PS で述べたように、なんとか機能させることができました。ただし、パフォーマンスには影響しないようです。私がまだ経験している遅れは、画像の読み込み時間に関連していると思います。コードを必要最小限のバージョンに取り除いて、少し後でここに投稿しますが、誰かが私のアプローチに欠陥を見つけた場合は、遠慮なく指摘してください。繰り返しますが、どんな提案でも大歓迎です。

4

0 に答える 0