## HTML5 Canvas에서 커서로 부드럽게 확대/축소 기능을 구현하는 방법은 무엇입니까?

마우스 커서 주위로 확대/축소 초점 유지

HTML5에서 이미지를 탐색할 때 Google 지도에서 볼 수 있듯이 마우스 커서 주위를 확대하면 직관적인 사용자 경험이 추가됩니다. 하지만 이 움직임을 계산하는 것은 어려울 수 있습니다.

접근 방법:

커서 방향으로 확대하려면:

• 번역: 캔버스 컨텍스트를 다음과 같이 이동합니다. 커서 오프셋.
• 배율: 원하는 비율만큼 확대/축소.
• 역방향 번역: 커서 오프셋의 반대 방향으로 뒤로 이동.

계산:

이미지 위치와 크기, 캔버스 중심을 기준으로 한 커서 좌표:

• 커서 위치를 변환된 캔버스로 변환 컨텍스트: dx = (cursorX - canvasCenterX) * 스케일; dy = (cursorY - canvasCenterY) * scale;
• 번역: ctx.translate(dx, dy);
• 규모: ctx.scale(factor, Factor);
• 역번역: ctx.translate(-dx, -dy);

데모:

제공된 데모 링크를 방문하세요: http://phrogz.net/tmp/canvas_zoom_to_cursor.html .

이 예에서는 드래그, 클릭하여 확대, Shift-클릭하여 확대 및 스크롤 휠 확대/축소 기능을 제공합니다.

참고:

현재 Safari의 확대/축소 속도는 Chrome이나 Firefox와 다를 수 있습니다.

위 내용은 ## HTML5 Canvas에서 커서로 부드럽게 확대/축소 기능을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!