HTML5 Canvasで回転後のポイントを正確に検出する方法 ― Transformクラスによる座標変換

キャンバス回転時に座標変換が必要な理由

HTML5のCanvas APIで図形を描画する際、rotate()メソッドを使ってキャンバスを回転させると、それ以降に描画されるすべての点が回転の影響を受けます。そのため、マウスクリック位置などの特定のポイントを正確に検出したり、意図した位置に点を描画したりするには、元の座標を回転後の座標系へ変換（トランスフォーム）する必要があります。

つまり、キャンバスに適用した回転や平行移動などの変換と同じものを、ポイント側にも適用しなければ、画面上の実際の位置とずれが生じてしまうのです。

Transformクラスでポイントを検出する

この問題は、キャンバスに適用したのと同じ変換処理を持つTransformクラスを用意することで解決できます。以下はその基本的な使い方の例です。

var t = new Transform();
console.log(t.transformPoint(5, 6)); // 変換前のポイントは [5, 6]

t.rotate(1); // キャンバスに適用したのと同じ変換を適用
console.log(t.transformPoint(5, 6)); // 変換後のポイントは [-2.347, 7.449]

コードの解説

1. Transformインスタンスの生成

new Transform()で変換オブジェクトを作成します。初期状態では何も変換が適用されていないため、transformPoint(5, 6)は入力値と同じ [5, 6] をそのまま返します。

2. 回転の適用

t.rotate(1)で1ラジアン（約57.3度）の回転を適用します。ここで指定する角度は、キャンバスのコンテキストに対して実行したctx.rotate()と同じ値である必要があります。これにより、キャンバスとポイントが同じ変換状態を共有します。

3. 座標の変換

回転適用後に再度transformPoint(5, 6)を呼び出すと、回転行列に基づいて計算された新しい座標 [-2.347, 7.449] が返されます。これが、回転したキャンバス上での正しいポイント位置です。

Transformクラスの内部動作

この種のTransformクラスは、一般的に内部的に2次元の同次座標変換行列を保持しています。rotate()が呼ばれるたびに現在の行列と回転行列を掛け合わせて状態を更新し、transformPoint()では入力座標にこの行列を適用して結果を返します。これは、Canvasのレンダリングコンテキストが内部で行っている変換処理とまったく同じ仕組みです。

実用的な活用シーン

この手法は、以下のような場面で特に役立ちます。

• 回転した図形上でのマウスクリック判定
• 回転後のキャンバスへの正確なドラッグ＆ドロップ配置
• ズームや平行移動を組み合わせたインタラクティブなキャンバスアプリケーション

キャンバスに加えた変換をTransformクラス側にも順次反映させておけば、どのような複雑な変換状態でもポイントを正しく検出できるようになります。