HTML5에서 캔버스 컨텍스트를 마우스 커서로 어떻게 확대/축소합니까?

캔버스 컨텍스트를 마우스 커서로 확대

스크롤 휠을 사용하여 이미지 확대/축소가 포함된 HTML5 캔버스 프로젝트에서는 문제에 직면할 수 있습니다. Google 지도의 기능과 유사하게 커서를 향해 확대/축소합니다. 이 효과를 얻으려면 일련의 계산이 필요합니다.

움직임 계산

1. 캔버스 컨텍스트 변환 결정:

   • 커서의 오프셋(pt.x, pt.y)으로 캔버스 컨텍스트를 번역합니다.
   • 다음을 사용하여 컨텍스트 크기를 조정합니다. 확대/축소 비율(인수).
   • 커서 오프셋의 음수로 컨텍스트를 다시 번역합니다.

   <code class="js">ctx.translate(pt.x, pt.y);
   ctx.scale(factor, factor);
   ctx.translate(-pt.x, -pt.y);</code>

2. 커서 위치 변환:

   • 정확한 확대/축소를 위해서는 커서의 화면 공간 좌표를 변환된 캔버스 컨텍스트 좌표로 변환해야 합니다.

예제 데모

다음 링크를 방문하여 다음 링크를 방문하여 다음 링크를 방문하세요.

• 캔버스 이미지 커서로 확대
• 드래그 지원
• 확대하려면 클릭, 축소하려면 Shift를 누른 채 클릭
• 스크롤 휠 확대

데모: http://phrogz.net/tmp/canvas_zoom_to_cursor.html

참고: Safari에서는 확대/축소 동작이 Chrome 또는 Firefox와 다를 수 있습니다.

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