キャンバスの上にアプリケーションを構築しています。これは、マウスを動かすたびに再描画される単純な DOM で構成されています (はい、必要です)。パフォーマンスの問題のために、すべてのパーツが必要なものだけを再描画するわけではありません。
アプリはうまく機能していますが、ズーム機能を追加したいと思います。私の見方では、3 つの異なる方法で実行できます。
1 - ユーザーがズームインまたはズームアウトするたびに、すべての DOM 要素 (位置とサイズ) が再計算されます - 精度に問題があり、あまり適切な抽象化ではない可能性があります
2 - キャンバスには解像度のプロパティがあります (つまり、ユーザーがズームアウトすると、解像度が 1 から .75 に変わる可能性があります)。再描画のたびに計算を行う必要があります。
3 - 組み込みの translate() および scale() メソッドを使用します - おそらく最もエレガントで最速のソリューションですが、まったく直感的ではありません。後で私や他の誰かがどのようにそれを行っているかを理解するのは難しいかもしれません (これらのメソッドは完全なキャンバスで機能します。最初にキャンバス上で変換およびスケーリングし、その後、描画するすべてのものを「魔法のように」変換およびスケーリングします)
どちらが最適ですか、それとも私が考えていない他の可能性はありますか?