HTML5에서 캔버스를 마우스 커서 위치로 확대/축소하는 방법은 무엇입니까?

캔버스를 마우스 커서로 확대

대화형 HTML5 확대/축소와 관련된 프로젝트에서는 확대/축소를 커서 위치에 맞추는 것이 사용자 친화적인 경험을 위해 중요합니다. 이 글의 목적은 이 기능을 구현하는 데 필요한 계산을 안내하는 것입니다.

문제:

Google과 유사하게 커서 위치를 기준으로 캔버스를 확대/축소하는 방법은 무엇입니까? 지도?

사용 가능한 변수:

• 이미지 좌표(x, y)
• 이미지 크기(너비, 높이)
• 캔버스 중심을 기준으로 한 커서 좌표(cursor_x,cursor_y)

해결책:

1. 캔버스 이동: 커서의 오프셋을 기준으로 캔버스 컨텍스트를 이동하여 커서 주변을 확대할 수 있습니다.
2. 캔버스 크기 조정: 확대 또는 축소하려면 배율 요소를 조정하세요.
3. 뒤로 번역: 초기 번역을 보상하여 캔버스 컨텍스트를 원래 위치로 되돌립니다.

코드 조각은 다음과 같습니다.

<code class="javascript">ctx.translate(cursor_x, cursor_y);
ctx.scale(factor, factor);
ctx.translate(-cursor_x, -cursor_y);</code>

예제 조치:

실시간 시연을 보려면 http://phrogz.net/tmp/canvas_zoom_to_cursor.html을 방문하세요. 마우스 클릭과 스크롤 휠을 사용한 드래그 및 확대/축소를 지원합니다.

참고:

• 정확한 확대/축소를 위해 커서 위치를 화면 공간에서 변환된 위치로 변환하세요. 캔버스 컨텍스트.
• 현재 Safari의 확대/축소 동작이 다른 브라우저와 다르기 때문에 과도한 확대/축소가 발생합니다.

위 내용은 HTML5에서 캔버스를 마우스 커서 위치로 확대/축소하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!