JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5 Canvasをマウスカーソル位置を基準にズームする方法

Canvasのスケーリングは原点が基準になる

HTML5のCanvasは、常に現在の原点（デフォルトでは [0, 0]）を基準として拡大・縮小されます。そのため、マウスカーソルの位置など、別の点を基準にズームしたい場合は、あらかじめ原点を移動しておく必要があります。

原点を任意の座標に変更するには、translate() メソッドを使用します。

ctx.translate(desiredX, desiredY);

これにより、キャンバスの原点（(0, 0) の位置）が指定した座標に再マッピングされます。

translate() と scale() の役割

  • translate()： キャンバス上の (0, 0) の位置を再マッピングし、描画の基準点を移動させます。
  • scale()： 現在の描画内容を拡大または縮小します。

マウスカーソルの位置を中心にズームイン・ズームアウトするには、次の手順を踏みます。まず scale() で拡大・縮小を行い、その後、マウス位置のオフセットと逆向きの値で translate() を呼び出して基準点を戻します。

実装例

以下のコードは、ポイント pt（マウスカーソルの座標など）を中心にズームする基本的な実装例です。

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

この3行の処理により、指定したポイントを固定したままキャンバス全体を拡大・縮小できます。factor に1より大きい値を渡せばズームイン、1より小さい値を渡せばズームアウトになります。マウスホイールやピンチ操作と組み合わせることで、直感的なズーム機能を実装できます。

  1. HTML5 Canvasの変換（トランスフォーム）基本解説

    HTML5のCanvas APIには、変換行列（transformation matrix）を直接操作できるメソッドが用意されています。変換行列は初期状態で単位変換（identity transform）となっており、その後、各種の変換メソッドを呼び出すことで自由に調整できます。 主な変換メソッド translate(x, y)：座標原点を指定した位置へ移動します。 rotate(angle)：指定した角度（ラジアン）だけ描画内容を回転させます。 scale(x, y)：横方向・縦方向に拡大・縮小します。 transform(a, b, c, d, e, f)：現在の変換行列に、指定した行列

  2. HTML5でCanvas（キャンバス）を中央に配置する方法を徹底解説

    HTML5で<canvas>要素を画面の中央に配置する最もシンプルな方法は、canvasタグを<div>タグで囲み、そのdivに対して中央揃え（text-align:center）を指定することです。親要素であるdivが中央に配置されると、その中にあるcanvasも自動的に中央に表示されます。基本的な実装例<!DOCTYPE html> <html>    <body>       <div style=text-align:center;