html - 再レンダリングせずに Html5 キャンバスをパンする

Question

Html5 キャンバスを再レンダリングせずに、滑らかな遷移 (びくびくしない) でパンしたいと思います。これは可能ですか？コード例はありますか?

可能であれば、ズームにも適用できますか？

ローエンド システム (Windows タブレット) で実行すると、パニングが CPU を使いすぎて使用できなくなるというパフォーマンスの問題があります。範囲は ~2000 のグラフィック オブジェクトです。

Answer 1

残念ながら、キャンバスを再描画せずに変換することはできません。ただし、描画呼び出しが多すぎることが問題である場合は、キャンバスを一度レンダリングして結果をキャッシュし、その後の描画でキャッシュされた画像を再描画することができます。この方法は、描画している実際のものによっては、おそらく 150% を超えるスケーリングにはあまり適していないことに注意してください。

これがどのように見えるかを示すフィドルを作成しました。

http://jsfiddle.net/mobidevelop/sBvab/

少しビクビクすることがありますが、通常は画像をキャッシュしない場合よりも優れています。

あなたのマイレージは異なる場合があります。

Answer 2

要するに、いいえ。キャンバス上でパンしたい場合は、CSS を使用して表示されるキャンバス サイズを制限し、キャンバスが実際により大きくなるなど、悪いことをしていない限り、シーンを再描画する必要があります。(これを行わないでください。パフォーマンスが向上するわけではありません)。

しかし、上手に書いていれば、パンしながらキャンバスを再描画するのは速いはずです。「ぎくしゃく」している場合は、ここで何か他の問題が発生している可能性があります。

上記はズームにも当てはまります。特に、ベクター パス/テキスト/その他をスケーリングする場合はそうです。