0

画面の解像度に応じてサイズを自動的に計算し、(より大きな) マップ上の位置に合わせてタイルをレンダリングするキャンバス オブジェクトを使用して、スクロール可能なタイルマップを構築しようとしました。

生成されたタイルを移動し、新しく描画する必要があるタイルのみを描画する予定でした。

つまり、マップをスクロールし、上部に新しいタイルを描画し (上に移動する場合など)、表示されているキャンバスの外にあるボタンの最後のタイルを削除します。

私の問題は次のとおりです。

キャンバス内のすべてのタイルの位置を変更することは、パフォーマンスにとってあまり良いことではないと思います。これは and を使用して解決できると思いますが、getImageData()まだputImageData()1 つの問題が残っています。

これらのタイルを移動して新しいタイルを描画すると、常に 30px (1 タイル = 30x30) の「ホップ」が発生するため、スムーズで線形のスクロール効果でこれを作成するためのシンプルでパフォーマンスの高い技術的な方法はありますか?

4

1 に答える 1

2

またはパターンを使用してボード ウィザーを埋めるだけdrawImageです (後者では、タイルを正しい位置に配置するために変換を使用する必要があります)。

drawImage は新しい宛先サイズを引数として受け取るため、タイルもズームできます。

これは、他の質問のために作成したパターンの実装ですが、コードで何が起こっているかを確認できるはずです。

function fillPattern(img, w, h) {

    //draw the tile once
    ctx.drawImage(img, 0, 0, w, h);

    /// draw horizontal line by cloning
    /// already drawn tiles before it
    while (w < canvas.width) {
        ctx.drawImage(canvas, w, 0);
        w *= 2;
    }

    /// clone vertically, double steps each time
    while (h < canvas.height) {
        ctx.drawImage(canvas, 0, h);
        h *= 2;
    }
}

これが使用された実装(ライブ スケーリングとタイリングを備えたビデオ ウォール) でわかるように、パフォーマンスは良好です。

これをさらに投影するには、上記のように各タイルを描画する代わりに、キャンバスを新しい位置に描画し、新しい「ギャップ」を埋めるだけです。

ctx.drawImage(myCanvas, offsetX, offseY);
fillGap();

drawImage でクリッピングを使用することもできますが、canvas はこれを new 用に内部でクリッピングするため、JavaScript で画像の一部をキャンバスの外に移動するときに画像をクリッピングしてもメリットはありません。

于 2013-08-07T22:21:46.767 に答える