キャンバスの原点を減算し、ポイントをスケールします。
イベントの clientX と clientY、および canvas.getBoundingClientRect() によって返される四角形から開始します。長方形はビューポートを基準にして配置されるため、拡大縮小する前にその左と上を減算します。論理ゲームが 800 x 450 で、表示される四角形が 400 x 225 の場合、ローカルの x と y を 2 倍します。ページのスクロール位置に関係なく、表示された中心にあるポインターは論理 (400、225) にマップされます。
ウィンドウの幅に基づく仮定ではなく、実際のコンテンツの四角形を使用します。 CSS の境界線やキャンバスの外側のパディングを考慮し、サイズ変更や向きの変更後にマッピングを更新します。ゲームでカメラ オフセット、レターボックス、または別のワールド変換が使用されている場合は、ポイントをゲームのヒット領域と比較する前に、これらの操作を逆の順序で反転します。
デッドスペースを含む表面全体をテストする
変換されたポインターの位置に一時的な十字線を置き、キャンバスの 4 つの隅、中心、およびターゲットの各端をすべてテストします。簡単なキャリブレーション チェックは、描画された円の中心をクリックし、報告されたワールド ポイントが円の中心近くにあることを確認することです。次に、その外側をクリックして、ヒット境界が意図した許容マージンと一致していることを確認します。 MDN は、clientX をビューポート相対として文書化し、getBoundingClientRect() をビューポート相対の要素境界を返すものとして文書化します。これらの測定値をペアにすることで、座標空間の混合を回避できます。
レンダリングを続けて領域をリンクする
ターゲットのワールド位置と寸法を一度保存し、そのデータを使用してターゲットを描画し、それに対してポインタをテストします。表示されるアイコンとクリック領域に対して個別に手入力した画面座標を維持することは避けてください。キャンバスのスケール、CSS サイズ、デバイスのピクセル比、またはカメラのオフセットを変更した後、再テストします。座標プローブは正しいがターゲットがまだ外れている場合は、任意のピクセル オフセットを追加する代わりに、その形状計算と入力順序を検査します。
キャンバスヒットテストの座標についての質問
キャンバスのヒットには offsetX と offsetY を使用する必要がありますか?
これらは単純な未変換のキャンバスには便利ですが、明示的なクライアント座標、要素の境界、およびゲームの変換により、レイアウトやカメラのスケーリングが変更されたときに各変換ステップがより明確になります。
devicePixelRatio はポインタ変換に属しますか?
ポインタがポイントし、シェイプにバッキング ストア ピクセルが使用されている場合のみ。一般的なアプローチでは、ビューポート座標を論理ゲーム単位にマップし、レンダリング変換内でデバイス ピクセルのスケーリングを維持します。
関連情報
古い情報を見つけましたか？ 訂正を連絡