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

マウス カーソルに向かってキャンバスをズームする: 包括的なガイド

インタラクティブな HTML5 の領域で

プログラミングでは、多くのプロジェクトに画像をズームインおよびズームアウトする機能が含まれています。シームレスで直感的なズーム エクスペリエンスを実現するには、Google マップのパンやズーム機能と同様に、マウス カーソルに向かってズームすることが望ましいことがよくあります。このガイドでは、この効果を実現するために必要な計算とテクニックについて詳しく説明します。

キャンバスを効果的にズームするには、中心からのオフセットを決定する必要があります。キャンバスの現在のマウス カーソル位置まで移動します。画像の左上隅の座標を (imageX, imageY) として表し、キャンバスの中心を基準としたカーソルの座標を (cursorX,cursorY) として表します。

カーソルに向かって効果的にズームするには、次の手順を利用します:
キャンバスを移動します:
2. まず、キャンバス コンテキストをオフセット量だけ移動 (シフト) します。
キャンバスのスケール:
3. 次に、特定の係数によってコンテキストが拡大または縮小されます。
逆変換:

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

より明確に理解するには、この対話型のデモを参照してください: http://phrogz.net/ tmp/canvas_zoom_to_cursor.html。この例では、ドラッグ、クリックしてズームイン、Shift キーを押しながらクリックしてズームアウト、ホイールを上下にスクロールするなど、さまざまなアクションがサポートされています。

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