1

Html5 2d Canvasを使用して、ある種のマップを作成しています。

主な機能はズームとドラッグです。私の問題は、マップのドラッグが非常にぎくしゃくしていることです。私の理解ではアニメーションではないので、requestAnimationフレームを使用できるかどうか、またはどのように使用できるかわかりませんか？

これまでに最適化してきました。1）ズームアウトすると、細部が不必要に描画されません。2）ズームインすると、ビューポートの外側に描画可能なアイテムが描画されません。

（私はキャンバスの描画を除いてJQueryを使用しています）。現在、ユーザーがonmousedownをトリガーすると、各mousemoveイベントがキャンバスを再描画するため、マップをドラッグします。つまり、ユーザーがビューポートに表示する内容を変更します。

だから、単純化：

$(canvas).mousemove(function(e) {
    if (mousedown){
        dragger.update({x: e.pageX, y: e.pageY});
        drawer.drawMap();
    }
});

function MapDrawer(...){
    this.drawMap = function(){
        this.ctx.clearRect(0,0, this.canvasWidth, this.canvasHeight);
        this.ctx.save(); 
        this.ctx.transform(...); // map position and zoom
        this.selectivelyDrawMapFeatures();
        this.ctx.restore(); 
    }
}

requestAnimationFrameでこれを改善できますか？誰かがこれをどのように実装または改善できるかを少しの疑似コードで示すのに十分な情報を提供したことを願っています。

ありがとう

4

1 に答える 1

1

はい、requestAnimationFrame を使用できます。requestAnimationFrame が実際に行うことは、関数を実行してから画面を再描画することだけです。基本的に手順は次のようになります

*mousedown: マウスの位置の追跡を開始し、requestAnimationFrame を介してキャンバスの再描画を開始します。window.requestAnimationFrame(myRedrawFunction)

*onmousemove: ドラッグされたオブジェクトの位置を追跡します

*onmouseup: 追跡/再描画を停止

再描画関数が追跡している場所からオブジェクトの場所を取得していることを確認してください (つまり、DOM に依存しないでください。ただし、キャンバス プロジェクトであるため、とにかくそうではないと思います)。

于 2012-10-05T16:18:20.033 に答える