Canvas で Google マップのズーム動作を模倣する方法: マウス カーソルの周りをズームする?

マウス カーソルの周りでキャンバスをズーム

スクロール ホイールを使用して画像をズームすることは、Web アプリケーションの一般的な機能です。この場合の目標は、マウス カーソルの周囲でズームが行われる Google マップの動作を模倣することです。

問題

課題は、必要な動きを計算することにあります。このズーム効果を実現するには。画像の左上隅の座標、幅、高さ、キャンバスの中心を基準としたマウス カーソルの x 座標と y 座標が与えられた場合、ズーム変換はどのように決定すればよいでしょうか?

解決策

この解決策には、キャンバス コンテキストを使用する 3 つの手順が含まれます:

1. Translate: コンテキストの原点をマウス カーソルの位置に移動して、ズームの中心をその周りにします。
2. スケール: 希望の倍率で拡大または縮小します。
3. 移動 (反転): 原点を元の位置に戻します。

次の JavaScript コードは、これらの手順を実装します。

ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);

デモと追加メモ

この手法の実際のデモは、次の場所にあります。http ://phrogz.net/tmp/canvas_zoom_to_cursor.html

デモでは、ドラッグ、クリックによるズームイン、Shift-クリックによるズームアウト、およびスクロール ホイール ズームがサポートされています。 Safari は Chrome や Firefox などの他のブラウザよりも高速なズーム動作を示すことは注目に値します。

以上がCanvas で Google マップのズーム動作を模倣する方法: マウス カーソルの周りをズームする?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。