HTML5 でキャンバス コンテキストをマウス カーソルにズームするにはどうすればよいですか?

キャンバス コンテキストをマウス カーソルに合​​わせてズームする

スクロール ホイールを使用した画像のズームを伴う HTML5 キャンバス プロジェクトでは、次のような課題が発生する可能性があります。 Google マップの機能と同様に、カーソルに向かってズームします。この効果を実現するには、一連の計算が必要です。

動きの計算

1. キャンバス コンテキスト変換の決定:

   • カーソルのオフセット (pt.x、pt.y) によってキャンバス コンテキストを移動します。
   • 次を使用してコンテキストをスケールします。ズーム係数 (factor)。
   • カーソルのオフセットの負の値でコンテキストを戻します。

   <code class="js">ctx.translate(pt.x, pt.y);
   ctx.scale(factor, factor);
   ctx.translate(-pt.x, -pt.y);</code>

2. カーソル位置の変換:

   • 正確にズームするには、カーソルの画面空間座標を変換されたキャンバス コンテキスト座標に変換する必要があります。

サンプル デモンストレーション

以下を含む実際の例については、次のリンクにアクセスしてください。

• キャンバス画像のカーソルへのズーム
• ドラッグサポート
• クリックして拡大、Shift キーを押しながらクリックして縮小
• スクロールホイールのズーム

デモ: http://phrogz.net/tmp/canvas_zoom_to_cursor.html

注: Safari では、ズーム動作が Chrome や Firefox とは異なる場合があります。

以上がHTML5 でキャンバス コンテキストをマウス カーソルにズームするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。