2D 좌표계 간에 점을 매핑하는 방법

이 항목에서는 2D 좌표계 간에 점을 매핑하는 방법에 대해 설명합니다. 이 방법은 캔버스와 같이 CTM(current transformation matrix)을 제공하지 않는 그래픽 시스템에 유용할 수 있습니다.

아핀 변환은 일반적으로 회전, 변환, 확대 및 전단을 구성하여 두 개의 2D 좌표계를 연결할 수 있는 선형(또는 1차) 변환입니다. 가능한 예는 다음과 같습니다.

두 개의 2D 아핀 좌표계

일반적인 화면 좌표계(빨간색으로 표시)를 가정할 경우 아핀 변환은 다음과 같이 대수적으로 표현됩니다.

일반 아핀 변환 방정식

즉, a, b, cd를 확인할 수 있으면 점 (x, y)에서 점 (x', y')를 계산할 수 있으며 그 반대의 경우도 마찬가지입니다.

이 선형 방정식 시스템에서는 4개의 요소를 알 수 없습니다. 따라서 a, b, cd를 확인하려면 4개의 방정식이 필요합니다.

4개의 방정식과 4개의 알 수 없는 요소

행렬 표기법에서는 이 선형 시스템을 다음과 같이 쓸 수 있습니다.

이전 방정식 시스템의 행렬 형식

a부터 d까지를 확인하려면 다음과 같이 도치M시켜 해결합니다.

u 벡터 해결

참고  수많은 수학 웹 사이트(예: WolframAlpha)뿐만 아니라 최신 계산기를 사용하여 행렬을 쉽게 도치시킬 수 있지만 M 기호는 다음과 같이 도치됩니다.

M 도치에 대한 수식

이제 uM을 검사하여 각 좌표계에서 알려진 일치 점 2개만 필요함을 확인합니다.

u 벡터 및 M 행렬

예를 들어 이전 다이어그램에서는 다음을 확인합니다.

첫 번째 다이어그램의 일치 점 집합

이러한 값을 uM에 연결하면 다음과 같은 결과가 생성됩니다.

첫 번째 다이어그램에 대한 행렬 형식

M(표시된 근사값)을 도치하고 u를 곱하면 다음과 같은 결과가 생성됩니다.

v 벡터의 계산

즉, 다음과 같은 결과가 생성됩니다.

v 벡터의 a, b, c 및 d

따라서 다음과 같은 변환 방정식이 됩니다.

첫 번째 다이어그램에 대한 변환 방정식의 계산

예를 들어 (x, y) = (37.1, 58.3)는 다음과 같이 점 (x', y') = (-7, -3)에 매핑됩니다.

변환 방정식에 대한 첫 번째 유효성 검사

또한 점 (x, y) = (54.28, 24.33)은 예상대로 x’y’-원점에 매핑됩니다.

첫 번째 다이어그램의 변환 방정식에 대한 두 번째 유효성 검사

이 변환 기술은 CTM(current transformation matrix)을 제공하지 않는 그래픽 시스템에 유용할 수 있습니다. SVG와 달리 캔버스(이 글을 쓰는 시점)는 CTM을 제공하지 않습니다. 즉, canvas.context.getTransform 메서드가 없습니다. 따라서 여기에서 설명한 기술을 다양한 시나리오에서 대신 사용할 수 있습니다. 예를 들어 다음과 같은 좌표계(녹색)가 포함된 600 x 400 픽셀 캔버스(빨간색)을 살펴보겠습니다.

캔버스 다이어그램(두 번째 다이어그램)

비교적 간단한 경우에는 선형 대수를 사용하지 않고도 필요한 변환 방정식을 추론할 수 있지만 위의 절차에서는 설명을 위해 사용합니다. 이 다이어그램에서는 다음을 확인합니다.

두 번째 다이어그램의 일치 점 집합

따라서 다음과 같습니다.

두 번째 다이어그램과 관련된 M 행렬

또한 다음과 같습니다.

두 번째 다이어그램의 M 도치

따라서 다음과 같은 결과가 생성됩니다.

두 번째 다이어그램에 대한 v 벡터의 해

따라서 다음과 같은 변환 방정식이 됩니다.

두 번째 다이어그램에 대한 변환 방정식

즉, (0, 0)은 다음과 같이 (-8, 4)에 매핑됩니다.

두 번째 다이어그램의 변환 방정식에 대한 첫 번째 유효성 검사

또한 (600, 400)은 동일한 방식으로 (4, -4)에 매핑됩니다.

두 번째 다이어그램의 변환 방정식에 대한 두 번째 유효성 검사

최종 유효성 검사로 (400, 200)이 녹색 좌표계의 원점에 매핑되는 것을 확인합니다.

두 번째 다이어그램의 변환 방정식에 대한 세 번째 유효성 검사

변환 방정식 계수를 알고 있는 경우 다음과 같이 (x', y')에서(x, y)를 계산할 수 있습니다.

x' 및 y'가 주어진 x 및 y에 대한 방정식

결론적으로 그래픽 시스템(예: 캔버스)에서 CTM을 제공하지 않는 경우 두 2D 좌표계에서 두 개의 일치 점이 주어지면 위의 기술을 사용하여 유용한 변환 방정식을 생성할 수 있습니다.

관련 항목

Canvas를 사용하여 3D 그래픽을 만드는 방법
HTML5 캔버스
SVG 좌표 변환

 

 

표시:
© 2014 Microsoft