HTML5 でキャンバスをマウス カーソルの位置にズームする方法

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

インタラクティブな HTML5 を作成する場合 ズームを伴うプロジェクトでは、ズームをカーソルの位置に合わせることが、ユーザーフレンドリーなエクスペリエンスにとって重要です。この記事は、この機能を実装するために必要な計算をガイドすることを目的としています。

問題:

Google と同様に、カーソルの位置を基準にしてキャンバスをズームするにはどうすればよいですか?マップ?

使用可能な変数:

• 画像座標 (x, y)
• 画像寸法 (幅、高さ)
• キャンバスの中心を基準としたカーソル座標 (cursor_x、cursor_y)

解決策:

1. キャンバスの移動:カーソルのオフセットに基づいてキャンバスのコンテキストをシフトし、カーソルの周囲をズームできるようにします。
2. キャンバスのスケール: ズームインまたはズームアウトするスケール係数を調整します。
3. Translate Back: キャンバス コンテキストを元の位置に戻し、最初の翻訳を補正します。

コード スニペットは次のとおりです:

<code class="javascript">ctx.translate(cursor_x, cursor_y);
ctx.scale(factor, factor);
ctx.translate(-cursor_x, -cursor_y);</code>

例アクション:

ライブ デモンストレーションについては、http://phrogz.net/tmp/canvas_zoom_to_cursor.html にアクセスしてください。マウスのクリックとスクロール ホイールによるドラッグとズームがサポートされています。

注:

• 正確にズームするには、カーソルの位置を画面スペースから変換後のスペースに変換します。キャンバス コンテキスト。
• 現在、Safari のズーム動作は他のブラウザとは異なるため、過剰なズームが発生します。

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