HTML5에서 마우스 커서를 향해 캔버스를 어떻게 확대/축소합니까?

마우스 커서 방향으로 캔버스 확대/축소: 종합 가이드

대화형 HTML5 프로그래밍을 할 때 많은 프로젝트에는 이미지 확대 및 축소 기능이 포함됩니다. 원활하고 직관적인 확대/축소 환경을 얻으려면 Google 지도의 이동 및 확대/축소 기능과 유사하게 마우스 커서 방향으로 확대/축소하는 것이 바람직한 경우가 많습니다. 이 가이드에서는 이 효과를 달성하는 데 필요한 계산과 기술을 자세히 알아볼 것입니다.

움직임 계산 결정

효과적인 캔버스 확대/축소를 위해서는 중심으로부터의 오프셋을 결정해야 합니다. 캔버스를 현재 마우스 커서 위치로 이동합니다. 이미지의 왼쪽 위 모서리 좌표를 (imageX, imageY)로 표시하고 캔버스 중심을 기준으로 한 커서의 좌표를 (cursorX, 커서Y)로 표시하겠습니다.

확대/축소 구현

커서를 향해 효과적으로 확대/축소하려면 다음 단계를 활용합니다.

1. 캔버스 변환: 먼저 캔버스 컨텍스트를 오프셋 양만큼 변환(이동)합니다.
2. 캔버스 크기 조정: 그런 다음 컨텍스트의 크기가 조정되어 특정 요소에 따라 확대 또는 축소됩니다.
3. 뒤로 번역: 마지막으로 다시 번역합니다. 정렬을 유지하기 위해 무효화된 마우스 오프셋.

이 일련의 변환은 캔버스를 커서 위치 쪽으로 효과적으로 확대/축소합니다. 다음 JavaScript 코드는 이러한 작업을 보여줍니다.

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

대화형 예제

더 명확한 이해를 위해 다음 대화형 데모를 참조하세요: http://phrogz.net/ tmp/canvas_zoom_to_cursor.html. 이 예는 끌기, 클릭하여 확대, Shift 키를 누른 채 클릭하여 축소, 휠을 위 또는 아래로 스크롤하는 등 다양한 작업을 지원합니다.

브라우저 고려 사항

Safari는 Chrome이나 Firefox에 비해 확대/축소 동작이 더 빠를 수 있다는 점에 유의하세요. 이는 브라우저가 변환을 처리하는 방식에 알려진 차이점이 있기 때문입니다.

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