웹페이지 Viewport와 Element의 절대/상대위치 구하기

Web 3D Viewer에서 raycast를 사용하기 위해 마우스의 좌표값을 이용하게 된다.

이때 3D rendering이 되는 canvas의 절대 좌표가 고려되어야 한다.

고려되지 않는다면, 실제 마우스의 위치와 3D viewer 상에서 교차하는 위치가 오차가 발생할 수 있다. (canvas의 절대 좌표 위치가 x:0, y:0이 아니라면)

 

초기에는 이부분 처리를 viewer의 margin 값을 기준으로 tolerance 값을 하드코딩으로 부여했는데, 당연히 이렇게 부여하는건 부적절하다. 이참에 정리!

 

1. Viewport

: 전체 웹페이지 중 브라우저 상에서 사용자가 보고 있는 화면 부분

 

2. 절대위치

: 전체 웹페이지 기준으로 해당 Element의 절대적인 위치

 

3. 상대위치

: 특정 Element 혹은 Viewport 기준으로 해당 Element의 상대적인 위치. 이 상대적인 위치는 기준을 무엇으로 하느냐에 따라 변할 수 있다.

 

아래의 그림을 참고하자면, 1번은 절대위치에 해당되고, 2번은 특정 Element/Viewport를 기준으로한 상대위치에 해당된다.

4. 자바스크립트 코드 

Element.getBoundingClientRect() 메서드를 이용해서 절대/상대 위치를 구할 수 있다.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

"method returns the size of an element and its position relative to the viewport"

//상대 위치 구하기
const targetEl = document.getElementById('target');		//위치를 구하고자 하는 Element
const clientRect = targetEl.getBoundingClientRect();		//Element의 속성 값 반환
const relativeTopPosition = clientRect.top;			//Viewport 기준으로 상대적인 Y좌표 값(top margin 값)

//절대 위치 구하기
const scrolledTopPosition = window.pageYOffset;				//window전체를 기준으로 스크롤된 길이
const absoluteTopPosition = scrolledTopPosition + relativeTopPosition;	//절대 좌표

 

 

참고 : https://mommoo.tistory.com/85