캔버스의 여백을 측정하는 정확한 방법

Question

캔버스는 자체 로컬 좌표계를 사용하므로 여러 가지 방법을 시도하여 마우스 클릭의 전체 X와 Y를 확인하고 좌표계로 변환합니다. 나도 jQuery를

.offset() 

를 통해 또는 자바 스크립트에

getBoundingClientRect() 

를 사용하여 캔버스 자체에서 왼쪽 여백 및 위쪽 여백을 뺀하여이 작업을 수행.

슬프게도,이 두 가지 모두 브라우저 스크롤링의 영향을받습니다. 나는 좀 더 명확한 가치를 줄 속성을 놓치고 있을지도 모른다. (나는 그들이 크로스 브라우저가 가능하다는 것을 알고 있기 때문에 e.clientX와 e.clientY를 사용한다.) 나는 DOM 요소의 모든 속성을 살펴 보았다. 그리고 그들 중 누구도 내가 필요로하는 것이 무엇인지 확실히 알려주지 못하는 것 같습니다 ...

문서 상단으로부터 얼마나 멀리 좌표계에 관련 시킬지를 결정하는 스크롤 독립적 인 방법이 필요합니다.

... 아니면 내가 바보 인가요? 객체에 상대적으로 마우스 클릭을 감지하는 크로스 브라우저 방식이 있습니까? 미리 감사드립니다.

Answer 1

가장 좋은 방법은 $ ('#'). offset()과 같은 jQuery 메서드를 사용하고 스크롤을 고려하는 것입니다. 또는 Object.getBoundingClientRect()를 사용할 수는 있지만 브라우저 간 호환성에 대해서는 잘 모르겠습니다.

다른 사람은 chiming in LOL 느낌이 없었습니다.