구현 참고 사항

다음 참고 사항에서는 소프트웨어 개발자가 SVG 언어의 기능에서 요구하는 형식으로 콘텐츠를 변환하거나 변환할 때 사용할 수 있는 알고리즘 및 기타 전략을 설명합니다.

B.2. 타원 호 매개변수 변환

다른 경로 세그먼트 표기법과 일관성을 유지하기 위해, SVG 경로의 호는 곡선의 시작점과 끝점 기준으로 정의됩니다.

타원 호의 이러한 매개변수화는 끝점 매개변수화라고 부릅니다. 끝점 매개변수화의 장점 중 하나는 모든 경로 명령이 새로운 "현재 점"의 좌표로 끝나는 일관된 경로 문법을 허용한다는 점입니다.

그러나 이것만이 소프트웨어나 수학에서 호의 기하를 기술하는 방법은 아닙니다. 이 섹션에서는 대안인 중심 매개변수화와, SVG의 끝점 매개변수화와 상호 변환하는 방법을 설명합니다.

B.2.1. 타원 호 끝점 문법

SVG 경로 명령에서 표현되는 타원 호는 다음과 같은 순서로 매개변수로 설명됩니다:

(x₁, y₁)은 경로의 현재 지점의 절대 좌표로, 이전 경로 명령의 마지막 두 매개변수에서 얻습니다.

r_x와 r_y는 타원의 반지름(반장축 및 반단축)입니다.

φ는 현재 좌표계의 x축에서 타원의 x축까지의 각도입니다.

f_A는 큰 호 플래그로, 180도 이하의 호가 선택되면 0이고, 180도를 초과하는 호가 선택되면 1입니다.

f_S는 스윕 플래그로, 중심에서 호까지의 선이 각도가 감소하는 방향으로 스윕하면 0, 증가하는 방향으로 스윕하면 1입니다.

(x₂, y₂)는 호의 마지막 지점의 절대 좌표입니다.

B.2.2. 매개변수화 대안

타원 호 위의 임의의 점 (x, y)은 다음과 같은 2차원 행렬 방정식으로 표현할 수 있습니다:

(eq. 3.1)

(\begin{matrix} x \\ y \end{matrix}) = (\begin{matrix} \cos φ & - \sin φ \\ \sin φ & \cos φ \end{matrix}) \cdot (\begin{matrix} r_{x} \cos θ \\ r_{y} \sin θ \end{matrix}) + (\begin{matrix} c_{x} \\ c_{y} \end{matrix})

    x = rx*cos(θ)*cos(φ) - ry*sin(θ)*sin(φ) + cx
    y = rx*cos(θ)*sin(φ) + ry*sin(θ)*cos(φ) + cy

(c_x, c_y)는 타원의 중심 좌표입니다.

r_x와 r_y는 타원의 반지름(반장축 및 반단축)입니다.

φ는 현재 좌표계의 x축에서 타원의 x축까지의 각도입니다.

θ는 아크 위의 점 (x, y)이 위치한 아크 주위의 각도이며, 다음 범위 내에서 변합니다:

θ₁: 타원 호가 늘어나거나 회전하기 전의 시작 각도입니다.
θ₂: 타원 호가 늘어나거나 회전하기 전의 끝 각도입니다.
Δθ: 이 두 각도의 차이입니다.

타원을 늘리고 회전시킨 원으로 생각한다면, θ₁, θ₂, Δθ는 각각 늘리기 및 회전 전 아크의 시작 각도, 끝 각도, 스윕 각도입니다. 이는 그래픽 API에서 흔히 사용되는 대안적 매개변수화로, 중심 매개변수화라고 부릅니다. 다음 섹션에서는 중심 매개변수화와 끝점 매개변수화 간의 변환 공식이 나옵니다.

B.2.3. 중심에서 끝점 매개변수화로의 변환

다음 변수들이 주어졌다고 가정합니다:

c_x c_y r_x r_y φ θ₁ Δθ

구해야 하는 값은 다음과 같습니다:

x₁ y₁ x₂ y₂ f_A f_S

다음 공식들을 사용하여 구할 수 있습니다:

$(\begin{matrix} x_{1} \\ y_{1} \end{matrix}) = (\begin{matrix} cos φ & - sin φ \\ sin φ & cos φ \end{matrix}) \cdot (\begin{matrix} r_{x} cos θ_{1} \\ r_{y} sin θ_{1} \end{matrix}) + (\begin{matrix} c_{x} \\ c_{y} \end{matrix})$	(eq. 4.1)
$(\begin{matrix} x_{2} \\ y_{2} \end{matrix}) = (\begin{matrix} cos φ & - sin φ \\ sin φ & cos φ \end{matrix}) \cdot (\begin{matrix} r_{x} cos (θ_{1} + Δ θ) \\ r_{y} sin (θ_{1} + Δ θ) \end{matrix}) + (\begin{matrix} c_{x} \\ c_{y} \end{matrix})$	(eq. 4.2)
$f_{A} = \{\begin{matrix} 1 if \|Δ θ\| > 180 ° \\ 0 if \|Δ θ\| \leq 180 ° \end{matrix}$	(eq. 4.3)
$f_{S} = \{\begin{matrix} 1 if Δ θ > 0 ° \\ 0 if Δ θ < 0 ° \end{matrix}$	(eq. 4.4)

B.2.4. 끝점에서 중심 매개변수화로의 변환

다음 변수들이 주어졌다고 가정합니다:

x₁ y₁ x₂ y₂ f_A f_S r_x r_y φ

구해야 하는 값은 다음과 같습니다:

c_x c_y θ₁ Δθ

방정식은 (x₁, y₁)에서 (x₂, y₂)를 잇는 선분의 중점에 원점을 옮기고, 이어서 좌표축을 타원의 축과 맞추는 회전을 거치면 더 간단해집니다. 모든 변환된 좌표는 프라임(′) 기호로 표시됩니다. 이 값들은 중심 매개변수화 변수들을 구하는 중간값입니다. 이 절차는 다음 단계로 구성됩니다:

1단계: 계산 (x₁′, y₁′)

(\begin{matrix} {x_{1}}^{'} \\ {y_{1}}^{'} \end{matrix}) = (\begin{matrix} cos φ & sin φ \\ - sin φ & cos φ \end{matrix}) \cdot (\begin{matrix} \frac{x_{1} - x_{2}}{2} \\ \frac{y_{1} - y_{2}}{2} \end{matrix})

(eq. 5.1)

2단계: 계산 (c_x′, c_y′)

(\begin{matrix} {c_{x}}^{'} \\ {c_{y}}^{'} \end{matrix}) = \pm \sqrt{\frac{{r_{x}}^{2} {r_{y}}^{2} - {r_{x}}^{2} {({y_{1}}^{'})}^{2} - {r_{y}}^{2} {({x_{1}}^{'})}^{2}}{{r_{x}}^{2} {({y_{1}}^{'})}^{2} + {r_{y}}^{2} {({x_{1}}^{'})}^{2}}} (\begin{matrix} \frac{r_{x} {y_{1}}^{'}}{r_{y}} \\ - \frac{r_{y} {x_{1}}^{'}}{r_{x}} \end{matrix})

(eq. 5.2)

여기서 + 부호는 f_A ≠ f_S일 때 선택하고, − 부호는 f_A = f_S일 때 선택합니다.

3단계: 계산 (c_x, c_y) from (c_x′, c_y′)

(\begin{matrix} c_{x} \\ c_{y} \end{matrix}) = (\begin{matrix} cos φ & - sin φ \\ sin φ & cos φ \end{matrix}) \cdot (\begin{matrix} {c_{x}}^{'} \\ {c_{y}}^{'} \end{matrix}) + (\begin{matrix} \frac{x_{1} + x_{2}}{2} \\ \frac{y_{1} + y_{2}}{2} \end{matrix})

(eq. 5.3)

4단계: 계산 θ₁ 및 Δθ

일반적으로 두 벡터 (u_x, u_y) 와 (v_x, v_y) 사이의 각은 다음과 같이 계산할 수 있습니다

∠ (\begin{matrix} \overset{⇀}{u} & , & \overset{⇀}{v} \end{matrix}) = \pm arccos (\frac{\overset{⇀}{u} \cdot \overset{⇀}{v}}{‖\overset{⇀}{u}‖ ‖\overset{⇀}{v}‖})

(eq. 5.4)

여기에서 나타나는 ± 부호는 u_x v_y − u_y v_x의 부호입니다.

이 각도 함수를 이용하여 θ₁ 및 Δθ를 다음과 같이 표현할 수 있습니다:

$θ_{1} = ∠ (\begin{matrix} (\begin{matrix} 1 \\ 0 \end{matrix}) & , & (\begin{matrix} \frac{{x_{1}}^{'} - {c_{x}}^{'}}{r_{x}} \\ \frac{{y_{1}}^{'} - {c_{y}}^{'}}{r_{y}} \end{matrix}) \end{matrix})$	(eq. 5.5)
$Δ θ \equiv ∠ (\begin{matrix} (\begin{matrix} \frac{{x_{1}}^{'} - {c_{x}}^{'}}{r_{x}} \\ \frac{{y_{1}}^{'} - {c_{y}}^{'}}{r_{y}} \end{matrix}) & , & (\begin{matrix} \frac{{- x_{1}}^{'} - {c_{x}}^{'}}{r_{x}} \\ \frac{{- y_{1}}^{'} - {c_{y}}^{'}}{r_{y}} \end{matrix}) \end{matrix}) mod 360 °$	(eq. 5.6)

여기서 Δθ는 −360° < Δθ < 360° 범위로 고정되며, 다음과 같습니다:

만약 f_S = 0이면, Δθ < 0,

만약 f_S = 1이면, Δθ > 0.

즉, f_S = 0 이고 (eq. 5.6)의 오른쪽이 0보다 크면 360°를 빼고, f_S = 1 이고 (eq. 5.6)의 오른쪽이 0보다 작으면 360°를 더합니다. 그 외에는 그대로 둡니다.

B.2.5. 범위를 벗어난 반지름의 보정

이 섹션에서는 경로 구현 참고 사항에서 설명한 대로, 범위를 벗어난 r_x와 r_y에 대해 필요한 수학적 조정 방법을 설명합니다. 알고리즘적으로 이러한 조정은 다음 단계로 구성됩니다:

1단계: 반지름이 0이 아님을 보장

r_x = 0 또는 r_y = 0이면, (x₁, y₁)에서 (x₂, y₂)까지 직선으로 처리하고 중단합니다. 그렇지 않으면,

2단계: 반지름이 양수임을 보장

r_x와 r_y의 절대값을 취합니다:

\begin{array}{l} r_{y} \leftarrow |r_{y}| \\ r_{y} \leftarrow |r_{y}| \end{array}

(eq. 6.1)

3단계: 반지름이 충분히 큰지 확인

방정식 (eq. 5.1)의 프라임 좌표값을 사용하여 계산합니다

Λ = \frac{{({x_{1}}^{'})}^{2}}{{r_{x}}^{2}} + \frac{{({y_{1}}^{'})}^{2}}{{r_{y}}^{2}}

(eq. 6.2)

위 방정식의 결과가 1 이하이면 r_x와 r_y를 추가로 변경할 필요가 없습니다. 결과가 1보다 크면 다음과 같이 변경합니다

\begin{array}{l} r_{x} \leftarrow \sqrt{Λ} r_{x} \\ r_{y} \leftarrow \sqrt{Λ} r_{y} \end{array}

(eq. 6.3)

4단계: 계산 계속 진행

나머지 타원 호 계산을 계속 진행합니다. 예: 끝점에서 중심 매개변수화로의 변환 알고리즘 등. 참고: 이 섹션의 반지름 보정 결과로, 타원의 중심에 대한 방정식 (5.2)는 항상 적어도 하나의 해를 가지며(즉, 근호 안이 음수가 되지 않음), 만약 반지름이 방정식 (eq. 6.3)으로 확대된 경우에는 (eq. 5.2)의 근호 안이 0이 되어 타원의 중심에 대해 정확히 하나의 해가 존재합니다.

B.3. 고정밀 기하 생성 참고 사항

단정밀도보다 더 높은 실제 정밀도로 표시하려면, CTM을 생성할 때(자세한 내용은 적합한 SVG 뷰어 섹션의 CTM 생성 처리 참조) 적어도 배정밀도 부동소수점이 사용된다는 점을 활용할 수 있습니다. 이를 활용한 콘텐츠 생성 절차는 다음과 같습니다:

부록 B: 구현 참고 사항

B.1. 소개