마우스 휠을 돌리는 이벤트 리스너를 등록하고, 그에 따라 zoom-in, zoom-out 할 수 있도록 만들어 보자.
[ 이벤트 등록 ]
우선, js에서 마우스 관련 해서 어떠한 이벤트들이 있는지 확인해 봤다.
https://developer.mozilla.org/ko/docs/Web/Events
이벤트 참조 | MDN
DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가
developer.mozilla.org

엇, the exact event that I was looking for!
이제 이 이벤트관련 리스너를 내가 원하는 엘리먼트에 등록해줬다.
<svg
...
onWheel={this.wheelZoomListener}
>
참고로 나는 지도 어플리케이션에서 지도에서 줌인을 했을 때와 줌 아웃을 했을 때 지도 축척이 달라지는 것을 구현하고 싶었기에,
wheel의 방향을 구분 할 필요가 있었다.
[ wheel 방향에 따른 줌인, 줌아웃 ]
우선 방향 구분이 필요하기 때문에 다음과 같이 event를 콘솔에 찍어보기로 했다.
wheelZoomListener(e) {
console.log(e)
}
그리고 마우스 휠을 위로 한틱, 아래로 한틱 움직여서 살펴보니 다음 사진과 같이 deltaY 라는 값이 양과 음으로 다르다는 것을 알 수 있었다.


이제, deltaY 값을 분기점으로 삼아 줌인 줌아웃을 시켜보자.
zoomIn() {
this.zoom = Math.min(this.zoom + 1, MAX_ZOOM)
},
zoomOut() {
this.zoom = Math.max(this.zoom - 1, MIN_ZOOM)
},
wheelZoomListener(e) {
if (e.deltaY < 0) this.zoomIn()
else this.zoomOut()
},
이제, 아래처럼 마우스 휠로 줌인 줌아웃이 가능하게 됐다!
'JavaScript' 카테고리의 다른 글
Cookie 옵션 설정하기 (feat. iframe cookie 문제 해결) (0) | 2022.07.12 |
---|---|
커링(Currying) Feat. 커링으로 로그 함수 구현 (0) | 2022.07.04 |
Mixed Content 문제 해결하기(https에서 http 사이트로 요청) (1) | 2022.06.15 |
Hoisting(var, let, const, function ) (0) | 2022.05.23 |
Execution Context(실행 컨텍스트, feat JS엔진 작동 원리) (0) | 2022.05.16 |
마우스 휠을 돌리는 이벤트 리스너를 등록하고, 그에 따라 zoom-in, zoom-out 할 수 있도록 만들어 보자.
[ 이벤트 등록 ]
우선, js에서 마우스 관련 해서 어떠한 이벤트들이 있는지 확인해 봤다.
https://developer.mozilla.org/ko/docs/Web/Events
이벤트 참조 | MDN
DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가
developer.mozilla.org

엇, the exact event that I was looking for!
이제 이 이벤트관련 리스너를 내가 원하는 엘리먼트에 등록해줬다.
<svg
...
onWheel={this.wheelZoomListener}
>
참고로 나는 지도 어플리케이션에서 지도에서 줌인을 했을 때와 줌 아웃을 했을 때 지도 축척이 달라지는 것을 구현하고 싶었기에,
wheel의 방향을 구분 할 필요가 있었다.
[ wheel 방향에 따른 줌인, 줌아웃 ]
우선 방향 구분이 필요하기 때문에 다음과 같이 event를 콘솔에 찍어보기로 했다.
wheelZoomListener(e) {
console.log(e)
}
그리고 마우스 휠을 위로 한틱, 아래로 한틱 움직여서 살펴보니 다음 사진과 같이 deltaY 라는 값이 양과 음으로 다르다는 것을 알 수 있었다.


이제, deltaY 값을 분기점으로 삼아 줌인 줌아웃을 시켜보자.
zoomIn() {
this.zoom = Math.min(this.zoom + 1, MAX_ZOOM)
},
zoomOut() {
this.zoom = Math.max(this.zoom - 1, MIN_ZOOM)
},
wheelZoomListener(e) {
if (e.deltaY < 0) this.zoomIn()
else this.zoomOut()
},
이제, 아래처럼 마우스 휠로 줌인 줌아웃이 가능하게 됐다!
'JavaScript' 카테고리의 다른 글
Cookie 옵션 설정하기 (feat. iframe cookie 문제 해결) (0) | 2022.07.12 |
---|---|
커링(Currying) Feat. 커링으로 로그 함수 구현 (0) | 2022.07.04 |
Mixed Content 문제 해결하기(https에서 http 사이트로 요청) (1) | 2022.06.15 |
Hoisting(var, let, const, function ) (0) | 2022.05.23 |
Execution Context(실행 컨텍스트, feat JS엔진 작동 원리) (0) | 2022.05.16 |