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>

この一連の変換により、キャンバスがカーソルの位置に向かって効果的にズームされます。次の JavaScript コードは、これらの操作を示しています。

対話型の例

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

ブラウザに関する考慮事項

Safari は Chrome や Firefox と比べてズーム動作が高速になる可能性があることに注意してください。これは、これらのブラウザが変換を処理する方法の既知の違いによるものです。

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