マウス カーソルの周りでキャンバスをズーム
スクロール ホイールを使用して画像をズームすることは、Web アプリケーションの一般的な機能です。この場合の目標は、マウス カーソルの周囲でズームが行われる Google マップの動作を模倣することです。
問題
課題は、必要な動きを計算することにあります。このズーム効果を実現するには。画像の左上隅の座標、幅、高さ、キャンバスの中心を基準としたマウス カーソルの x 座標と y 座標が与えられた場合、ズーム変換はどのように決定すればよいでしょうか?
解決策
この解決策には、キャンバス コンテキストを使用する 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 サイトの他の関連記事を参照してください。