ドラッグ可能な HTML Canvas に描画されたマップのフルスクリーン ビューポートがあります。
ドラッグをアニメーション化するために 2 つの実装を試しました。
まず、キャンバスをウィンドウの幅と高さにし、ユーザーがマップをドラッグしたときに mousemove イベントごとに再描画し、描画された要素を変換しました。しかし、特に firefox は、requestAnimationFrame を使用しても、非常にぎくしゃくしたり、FPS が低くなったりしました。
代わりに、ユーザーがドラッグするときにキャンバス要素自体を移動してみました。つまり、ウィンドウの幅と高さの 3 倍のキャンバスを中央に描画し、任意の方向に完全にドラッグできるようにし、ユーザーがドラッグを終了するたびに再描画するようにします。これはクロムでは機能しましたが、IE と Firefox ではキャンバスの左上の象限しか描画されませんでした。(したがって、キャンバスを右下にドラッグした場合にのみ、描画が表示されます。)
2番目の方法が使用できない場合を検出する良い方法を誰かが提案できますか? 2 番目の方法では、IE と Firefox の両方$('canvas').attr("width")がキャンバスの幅をウィンドウの高さの 3 倍として返すため、これはオプションではありません。
私が考えることができる唯一のオプションは、すべてのブラウザで2番目の方法を手動でテストし、ルックアップ配列を作成して、コードが最初の方法にいつフォールバックするかを知ることです.
おそらく、誰かがこれらすべてにアプローチするより良い方法を知っていますか?
ありがとう