## HTML5 キャンバスでスムーズなズームツーカーソル機能を実現するにはどうすればよいですか?

マウス カーソルの周囲でズーム フォーカスを維持する

HTML5 で画像をナビゲートするときに、Google マップで見られるようにマウス カーソルの周囲をズームすると、直感的なユーザー エクスペリエンスが追加されます。しかし、この動きの計算は複雑になる可能性があります。

アプローチ:

カーソルに向かってズームするには:

• 翻訳: キャンバスのコンテキストをシフトします。カーソル オフセット。
• スケール: 希望の倍率でズームします。
• 逆移動: カーソル オフセットの反対側にシフトします。

計算:

画像の位置と寸法、およびキャンバスの中心に対する相対的なカーソル座標を指定します:

• カーソルの位置を変換されたキャンバスに変換しますコンテキスト: dx = (cursorX - CanvasCenterX) * スケール; dy = (cursorY - CanvasCenterY) * スケール;
• 翻訳: ctx.translate(dx, dy);
• スケール: ctx.scale(factor,要因);
• 逆翻訳: ctx.translate(-dx, -dy);

デモ:

提供されたデモ リンクにアクセスしてください: http://phrogz.net/tmp/canvas_zoom_to_cursor.html .

この例では、ドラッグ、クリックしてズーム、Shift-クリックしてズーム、およびスクロール ホイール ズームを特徴としています。

注:

現在の Safari のズーム速度はChrome や Firefox とは異なる場合があります。

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