벡터 기반지도를 회전하는 방법은 무엇입니까?

Question

CANVAS를 사용하여 벡터지도를 기반으로하여 그려진지도를 회전해야합니다. 브라우저에서 실행되는 탐색 시스템에서이지도를 사용합니다. 따르는 간단한 방법이 있습니까?

Answer 1

context.rotate(angle) 방법으로이를 수행 할 수 있습니다. 이 메서드는 현재 캔바스에 그려지는 것에 영향을주지 않지만 대신 회전을 설정 한 후에 그려지는 모든 것에 영향을줍니다. 각도는 라디안으로 표시되므로 전체 원은 pi * 2 = 6.28318530718입니다.

회전은 캔버스의 현재 내부 좌표계 점 0을 기준으로합니다. context.translate(x, y)을 사용하여 왼쪽 상단 구석이 아닌 캔버스 중앙에 배치하는 것이 좋습니다.

1. 받는 보이지 캔버스 그릴 사용 drawImage
2. 가시 캔버스 회전 설정 회전 중심
3. 로 표시 캔버스에 보이지 않는 배경 캔버스
4. 세트 변환 맵을 그리 보이는 하나 (당신이 drawImage를 사용할 때, 소스는 다른 캔버스 일 수도있다). 이 drawImage 호출은 사용자가 설정 한 회전 및 평행 이동의 영향을받습니다.

원래지도가 그려지는 방법과 방법을 제어 할 수 있다면 그리기 전에 원본 캔버스에 변형과 회전을 적용 할 수 있습니다.