내 그림 캔버스가 페이지 내에서 오프셋되는 이유는 무엇입니까?

Question

설명하기 어렵네요. 하지만 시도해 보겠습니다. 전체 캔버스가 오프셋됩니다. 어떻게 이런 일이 발생했는지, 어떻게 해결해야 할지 잘 모르겠습니다. 마우스가 페이지의 왼쪽 상단 모서리에 있고 중앙에서 시작하는 경우와 마찬가지로 캔버스 요소 자체의 왼쪽 상단 모서리와 일치합니다. 코드 조각을 사용하여 내가 말하는 내용을 이해하세요.

으아아아 으아아아 으아아아

이 코드가 좀 이상한 건 알지만 알려주세요.

Answer 1

마우스 위치를 계산하는 방법이 적절하지 않으며 뷰포트에 대한 캔버스의 편차를 고려해야 합니다. 이 작업을 수행하려면 getBoundingClientRect()를 사용할 수 없습니다.

으아아아

하지만 너비와 높이를 제거하거나 크기 조정 기능과 동일한 높이를 설정하여 .canvas CSS 클래스도 수정해야 합니다.

https://codepen.io/Joulss/pen/BaPYgpZ?editors=1111

Answer 2

이 문제는 실제로 해결하기 쉬운 문제입니다. 방금 오프셋 clientX 和 clientY을 잊어버렸습니다. 보시다시피, 이 좌표는 창 공간에 있으므로 (0,0)은 창의 왼쪽 상단에 있습니다. 캔버스가 왼쪽 상단에도 있었다면 모든 것이 괜찮아 보이지만 귀하의 경우 캔버스가 중앙에 있으므로 좌표가 정렬되지 않습니다. 캔버스의 화면 위치에서 좌표를 빼면 이 문제를 해결할 수 있습니다.

예는 다음과 같습니다.

으아아아

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect" rel="nofollow noreferrer">https:// /developer.mozilla.org/en에서 찾을 수 있습니다. -미국 /docs/Web/API/Element/getBoundingClientRect