# 그려진 대상과 포인터 테스트가 하나의 좌표 맵을 공유하도록 만듭니다.

> 포인터 위치를 캔버스 게임의 월드 좌표로 변환하여 눈에 보이는 대상과 클릭 가능한 히트 영역이 크기 조정 후에도 정렬된 상태를 유지하도록 합니다.

- URL: https://oneshotgems.ai/ko/topics/hit-testing-canvas-coordinates
- 카테고리: 게임 개발자용
- 유형: 가이드
- 업데이트일: 2026년 10월 5일

게임이 논리 세계 단위로 그리는 동안 이벤트는 뷰포트 픽셀로 측정되기 때문에 캔버스 버튼이 포인터 아래 중앙에 있는 것처럼 보이지만 여전히 놓칠 수 있습니다. 적중 테스트를 위해 하나의 좌표계를 선택한 다음 플레이 필드를 그리는 데 사용된 것과 동일한 디스플레이 변환을 통해 각 포인터 위치를 변환합니다. 이 가이드는 해당 변환에 중점을 둡니다. 고정 크기 게임 주변의 레터박스 영역을 포함하여 페이지에서 논리적 대상까지 단일 포인터를 추적하여 반응형 레이아웃 계획을 보완합니다.

## 캔버스 원점을 빼고 포인트 크기를 조정하세요.

이벤트의 clientX 및 clientY와 canvas.getBoundingClientRect()에서 반환된 사각형으로 시작합니다. 직사각형은 뷰포트를 기준으로 배치되므로 크기를 조정하기 전에 왼쪽과 위쪽을 뺍니다. 논리 게임이 800 x 450이고 표시된 직사각형이 400 x 225인 경우 로컬 x와 y에 2를 곱합니다. 표시된 중앙에 있는 포인터는 페이지의 스크롤 위치에 관계없이 논리(400, 225)에 매핑됩니다.

창 너비에 따른 가정이 아닌 실제 콘텐츠 직사각형을 사용하세요. 캔버스 외부의 CSS 테두리나 패딩을 고려하고 크기 조정이나 방향 변경 후 매핑을 새로 고칩니다. 게임에서 카메라 오프셋, 레터박스 또는 다른 세계 변환을 사용하는 경우 해당 지점을 게임의 히트 영역와 비교하기 전에 해당 작업을 역순으로 뒤집습니다.

## 데드 스페이스를 포함한 전체 표면을 테스트합니다.

변환된 포인터 위치에 임시 십자선을 배치하고 캔버스 모서리 4개, 중앙 및 대상의 각 가장자리를 모두 테스트합니다. 간단한 보정 확인은 그려진 원의 중심을 클릭하고 보고된 월드 포인트가 원의 중심 근처에 있는지 확인하는 것입니다. 그런 다음 바로 바깥쪽을 클릭하여 적중 경계가 의도한 허용 마진과 일치하는지 확인합니다. MDN은 clientX를 뷰포트 기준으로, getBoundingClientRect()를 뷰포트 기준 요소 경계 반환으로 문서화합니다. 이러한 측정값을 쌍으로 연결하면 좌표 공간이 혼합되는 것을 방지할 수 있습니다.

## 렌더링 및 히트 영역 연결 유지

대상의 세계 위치와 크기를 한 번 저장한 다음 해당 데이터를 사용하여 대상을 그리고 포인터를 테스트합니다. 표시되는 아이콘과 클릭 영역에 대해 별도의 손으로 입력한 화면 좌표를 유지하지 마세요. 캔버스 배율, CSS 크기, 장치 픽셀 비율 또는 카메라 오프셋을 변경한 후 다시 테스트하세요. 좌표 프로브는 정확하지만 대상이 여전히 누락된 경우 임의의 픽셀 오프셋을 추가하는 대신 모양 수학 및 입력 순서를 검사하십시오.

## 자주 묻는 질문

**캔버스 히트에 offsetX와 offsetY를 사용해야 합니까?** 변환되지 않은 단순한 캔버스에는 편리할 수 있지만 명시적인 클라이언트 좌표, 요소 경계 및 게임 변환을 사용하면 레이아웃이나 카메라 크기 조정이 변경될 때 각 변환 단계가 더욱 명확해집니다.

**devicePixelRatio가 포인터 변환에 속합니까?** 포인터 포인트 및 적중 모양이 백업 저장 픽셀을 사용하는 경우에만 해당됩니다. 일반적인 접근 방식은 뷰포트 좌표를 논리적 게임 단위로 매핑하여 렌더링 변환 내에서 장치 픽셀 크기 조정을 유지합니다.

## 궁금한 것을 더 찾아보세요

- [브라우저 게임 입력에 포인터 이벤트 사용](https://oneshotgems.ai/ko/topics/pointer-events-for-games): 게임 루프에서 캡처, 장치 ID 및 호환성 동작을 유지하면서 포인터 이벤트를 통해 마우스, 펜 및 터치를 모델링합니다.
- [브라우저 게임의 반응형 레이아웃 만들기](https://oneshotgems.ai/ko/topics/responsive-game-layouts): 시뮬레이션 상태를 화면 크기에 연결하지 않고 게임 표면을 해당 컨테이너에 적용하고 변경되는 뷰포트에서 레이아웃을 테스트합니다.

## 추가 읽을거리

- [MDN 클라이언트X](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX)
- [MDN getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)

---
대표 페이지: https://oneshotgems.ai/ko/topics/hit-testing-canvas-coordinates