마우스 커서 주변 캔버스 확대
스크롤 휠을 사용한 이미지 확대는 웹 애플리케이션의 일반적인 기능입니다. 이 경우 목표는 마우스 커서 주변에서 확대/축소가 발생하는 Google 지도의 동작을 모방하는 것입니다.
문제
문제는 필요한 움직임을 계산하는 데 있습니다. 이 확대/축소 효과를 얻으려면. 이미지의 왼쪽 상단 모서리 좌표, 너비, 높이, 캔버스 중심을 기준으로 한 마우스 커서의 x 및 y 좌표를 고려하여 확대/축소 변환을 어떻게 결정합니까?
해결책
해결 방법은 캔버스 컨텍스트를 사용하는 세 단계로 구성됩니다.
다음 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!