캔버스 원점을 빼고 포인트 크기를 조정하세요.
이벤트의 clientX 및 clientY와 canvas.getBoundingClientRect()에서 반환된 사각형으로 시작합니다. 직사각형은 뷰포트를 기준으로 배치되므로 크기를 조정하기 전에 왼쪽과 위쪽을 뺍니다. 논리 게임이 800 x 450이고 표시된 직사각형이 400 x 225인 경우 로컬 x와 y에 2를 곱합니다. 표시된 중앙에 있는 포인터는 페이지의 스크롤 위치에 관계없이 논리(400, 225)에 매핑됩니다.
창 너비에 따른 가정이 아닌 실제 콘텐츠 직사각형을 사용하세요. 캔버스 외부의 CSS 테두리나 패딩을 고려하고 크기 조정이나 방향 변경 후 매핑을 새로 고칩니다. 게임에서 카메라 오프셋, 레터박스 또는 다른 세계 변환을 사용하는 경우 해당 지점을 게임의 히트 영역와 비교하기 전에 해당 작업을 역순으로 뒤집습니다.
데드 스페이스를 포함한 전체 표면을 테스트합니다.
변환된 포인터 위치에 임시 십자선을 배치하고 캔버스 모서리 4개, 중앙 및 대상의 각 가장자리를 모두 테스트합니다. 간단한 보정 확인은 그려진 원의 중심을 클릭하고 보고된 월드 포인트가 원의 중심 근처에 있는지 확인하는 것입니다. 그런 다음 바로 바깥쪽을 클릭하여 적중 경계가 의도한 허용 마진과 일치하는지 확인합니다. MDN은 clientX를 뷰포트 기준으로, getBoundingClientRect()를 뷰포트 기준 요소 경계 반환으로 문서화합니다. 이러한 측정값을 쌍으로 연결하면 좌표 공간이 혼합되는 것을 방지할 수 있습니다.
렌더링 및 히트 영역 연결 유지
대상의 세계 위치와 크기를 한 번 저장한 다음 해당 데이터를 사용하여 대상을 그리고 포인터를 테스트합니다. 표시되는 아이콘과 클릭 영역에 대해 별도의 손으로 입력한 화면 좌표를 유지하지 마세요. 캔버스 배율, CSS 크기, 장치 픽셀 비율 또는 카메라 오프셋을 변경한 후 다시 테스트하세요. 좌표 프로브는 정확하지만 대상이 여전히 누락된 경우 임의의 픽셀 오프셋을 추가하는 대신 모양 수학 및 입력 순서를 검사하십시오.
캔버스 적중 테스트 좌표 관련 질문
캔버스 히트에 offsetX와 offsetY를 사용해야 합니까?
변환되지 않은 단순한 캔버스에는 편리할 수 있지만 명시적인 클라이언트 좌표, 요소 경계 및 게임 변환을 사용하면 레이아웃이나 카메라 크기 조정이 변경될 때 각 변환 단계가 더욱 명확해집니다.
devicePixelRatio가 포인터 변환에 속합니까?
포인터 포인트 및 적중 모양이 백업 저장 픽셀을 사용하는 경우에만 해당됩니다. 일반적인 접근 방식은 뷰포트 좌표를 논리적 게임 단위로 매핑하여 렌더링 변환 내에서 장치 픽셀 크기 조정을 유지합니다.
추가 읽을거리
오래된 정보를 발견하셨나요? 수정 사항 제보