페이지 확대/축소를 위해 마우스 휠을 사용하고, 페이지를 이동하려면 클릭하고 드래그하세요.

Question

마우스 휠을 사용하여 전체 페이지에 대한 스크롤 및 패닝 효과를 만드는 방법은 무엇입니까? 기본적으로 다른 2D 편집기와 마찬가지로 스크롤하여 확대/축소하고 클릭하고 드래그하여 이동하지만 몸체 전체에 적용됩니다.

온라인에서는 이에 대한 정보를 찾을 수 없습니다.

Answer 1

어디부터 시작해야 할지 모른다면, 어디서부터 시작해야 할지 아는 것이 쉬운 부분이기 때문에 금방 벽에 부딪힐 것입니다. 대략적인 가이드는 다음과 같습니다.

1. 이벤트 리스너를 wheel 이벤트에 추가하세요(방법 알아보기](https://stackoverflow.com/a/51276012/104380))
2. 초기(현재) zoom 值开始，计算轮子事件的增量并更新您的 zoom 값부터.
3. 이 목적으로 zoom 值以某种形式操纵页面的比例。您可以在 body 元素上使用 CSS transform:scale()를 사용하세요.
4. mousemove 이벤트에 대한 이벤트 리스너 추가(방법 알아보기](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event))
5. 감지된 마우스 움직임에 따라 행동하고 4개의 가장자리 중 하나에 도달하기 위해 body 요소를 팬 확대/축소해야 하는 정도를 계산합니다. 패닝은 CSS transform:translate(x, y)
를 통해 수행할 수 있습니다.