캔버스를 사용하여 Google 지도 확대/축소 동작을 모방하는 방법: 마우스 커서 주위 확대?

마우스 커서 주변 캔버스 확대

스크롤 휠을 사용한 이미지 확대는 웹 애플리케이션의 일반적인 기능입니다. 이 경우 목표는 마우스 커서 주변에서 확대/축소가 발생하는 Google 지도의 동작을 모방하는 것입니다.

문제

문제는 필요한 움직임을 계산하는 데 있습니다. 이 확대/축소 효과를 얻으려면. 이미지의 왼쪽 상단 모서리 좌표, 너비, 높이, 캔버스 중심을 기준으로 한 마우스 커서의 x 및 y 좌표를 고려하여 확대/축소 변환을 어떻게 결정합니까?

해결책

해결 방법은 캔버스 컨텍스트를 사용하는 세 단계로 구성됩니다.

1. 번역: 컨텍스트 원점을 마우스 커서 위치로 이동하여 확대/축소 중심을 설정합니다.
2. 배율: 원하는 비율로 확대 또는 축소합니다.
3. 이동(역전): 원점을 원래 위치로 다시 이동합니다.

다음 JavaScript 코드는 이러한 단계를 구현합니다.

ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);

데모 및 추가 참고사항

이 기술의 실제 데모는 여기에서 찾을 수 있습니다: http ://phrogz.net/tmp/canvas_zoom_to_cursor.html

데모에서는 드래그, 클릭하여 확대, Shift-클릭하여 축소 및 스크롤 휠 확대/축소를 지원합니다. Safari는 Chrome 및 Firefox와 같은 다른 브라우저보다 더 빠른 확대/축소 동작을 보인다는 점은 주목할 가치가 있습니다.

위 내용은 캔버스를 사용하여 Google 지도 확대/축소 동작을 모방하는 방법: 마우스 커서 주위 확대?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!