마우스 좌표값

마우스 무브 이벤트의 객체를 한번 보자

    function mousemoveHandler(e) {
        console.log(e);
    }
    window.addEventListener('mousemove',mousemoveHandler);

어디서 많이 보지 않았는가?

공 움직이기에서본 클릭 이벤트 객체와 똑같다

아마 마우스를 사용하는 이벤트들의 객체는 다 같은 것다고 유추해볼 수 있는 것 같다

객체의 x,y좌표값은 좌측 상단이 기준점이다

이렇게 쓸 수도 있겠지만 화면의 중앙이 기준점이 되게하려면 어떻게 할까?

화면의 가로 세로를 구한다음 나누기 2를하면 그게 중앙 좌표값일테다

console.log(window.innerWidth/2);
console.log(window.innerHeight/2);

이 값을 어떻게 계산해주어야할까?

우선 x축은 innerWidth/2의 값을 0으로 좌측은 음수 우측은 양수가 나오게끔해야하고

x값은 좌측끝을 기준으로 우측으로 마우스가 이동할 때 0부터 커져간다

그렇기 때문에 (마우스 좌표값 - 가로 중앙값)을 해주면 된다

console.log(e.clientX - window.innerWidth/2);

y축은 innerHeight/2의 값을 0으로 상단은 양수 하단은 음수가 나오게끔

마우스 y값은 상단이 0 아래로 갈수록 커져간다

그렇기 때문에 (-마우스 좌표값 + 세로 중앙값)을 하면된다

console.log(-e.clientY + window.innerHeight/2);

이렇게 하면 마우스가 움직일 때 모니터 중앙 좌표값이 (0,0)인 2차원 그래프 처럼 값을 그릴 수 있다