[그래픽] 폴리라인에서 곡선처리

들어가기

그래픽에서 폴리라인은 다양한 용도로 사용할 수 있다. 어떤 물체간에 연결선을 표시할 수 있고 어떤 대상을 둘러싸서 표시할 수도 있다. 그러나 폴리라인은 꺽이는 지점에서 각을 이루고 있다. 간혹 이를 매끄럽게 곡선처리해야할 경우가 있다. 이때 어떻게 처리하는 방법을 설명하려고 한다.

작성자: http://ospace.tistory.com/ (ospace114@empal.com)

폴리라인

폴리라인은 여러 개의 선이 연결된 구조이다. 두개 직선으로 구성된 폴리라인을 살펴보자.

Fig 01. 폴리라인

직선 끝은 점 p1, p2, p3로 표시한다. 점 p2에서 직선이 꺽이면서 꼭지점이 생긴다. 여기서 점 p2에서 꺽이는 부분을 곡선으로 처리할려고 한다. 즉, 다음 처럼 그릴려고 한다.

Fig 02. 곡선처리된 폴리라인

곡선 처리하기 전에 단위 벡터를 살펴보자.

단위벡터 응용

단위벡터는 길이가 1이기 때문에 길이만 곱하면 원하는 벡터를 만들 수 있다. 아래 그림에서 p1에서 p2로 가는 벡터가 있고 같은 방향으로 $\hat u_1$단위벡터가 있다.

Fig 03. 단위벡터 응용

단위 벡터를 구해보자. p1의 좌표는 (x1, y1)라고 하고 p2의 좌표는 (x2, y2)라고 하자. 두 점이기 때문에 아래 처럼 벡터를 구할 수 있다.

$$(dx, dy) = (x2-x1, y2-y1)$$

이를 단위 벡터를 만드는 방법은 길이로 나눠주면 된다.

$$\hat u_1 = (dx/length, dy/length) \\ length = \sqrt{dx\times dx + dy\times dy}$$

결국, 점 p1과 $\hat u_1$단위벡터가 있고 p1에서 p2의 길이를 안다면 p1에서 단위벡터와 길이를 곱해서 더하면 p2를 구할 수 있다.

$$p2 = p1 + \hat u_1 \times length$$

단위 벡터를 활용한 방법을 살펴보았다.

곡선처리

이제 폴리라인에서 곡선처리하는 방법을 살펴보자. 앞에서 살펴보았던 폴리라인을 다시 보자. 꺽이는 부분에서 곡선은 반지름 r를 갖는 호형태로 그릴려고 한다.

Fig 04. 곡선처리된 폴리라인 상세

먼저 점 p2과 점 p2 직선에서 호가 만나는 점 p2-1을 찾는다. 다음으로 점 p2과 점 p3 직선에서 호가 만나는 점 p2-2을 찾는다. 그런 후에 다음과 같은 선을 그리면 된다.

1. 점 p1과 점 p2-1 직선
2. 점 p2-1, 점 p2, 점 p2-2을 사용한 곡선
3. 점 p2-2와 점 p3 직선

이 시점에서 중요한 부분이 점 p2-1과 점 p2-2를 찾는데 있다. 이를 찾기 위해서 단위벡터를 구해야 한다. 점 p1과 점 p2 직선의 단위 벡터와 점 p2와 점 p3 직선의 단위벡터를 각각 구한다.

Fig 05. 단위벡터 적용된 폴라라인

여기까지 구하면 눈치채신 분들도 있을 거라 생각한다. 이제 점 p2-1과 점 p2-2를 구하면 된다.

$$p\text{2-1} = p2 - \hat u_1 \times r \ p\text{2-2} = p2 + \hat u_2 \times r$$

위 식에서 방향성에 의한 부호에 주의해야 한다. 점 p2-1은 점 p2에서 반지름 r만큼 단위벡터 반대 방향으로 이동한다. 또한 점 p2-2도 점 p2에서 반지름 r만큼 단위벡터 방향으로 이동한다.

이제 모든 점을 구했기 때문에 곡선을 갖는 폴리라인을 그릴 수 있다.

결론

이를 그래픽 화면으로 처리하는 방법은 각 라이브러리에 따라 다르기 때문에 여기에서는 다루지 않는다. 처음에는 직선의 각도를 구하고 삼각함수를 사용해 좌표를 구하는 방법을 사용했지만, 여기서는 사용하지 않았다. 물론 삼각함수도 나쁘지 않지만, 실제 컴퓨터에서 처리할 경우 삼각함수의 연산비용이 높다. 물론 단위 벡터를 구할 때에 루트를 사용하는 비용도 있지만 삼각함수보다 낮기 때문에 벡터 연산을 사용했다. 또한 벡터를 활용할 경우 다양한 형태로 활용이 가능하기 때문에 더 유용할 수 있다.
부족한 글이지만 여러분에게 참고가 되었으면 하네요. 모두 즐거운 코딩생활하세요. ospace.

참조

[1] 위키백과, 단위벡터, https://ko.wikipedia.org/wiki/단위벡터, 2025.04.02
[2] ospace, 벡터, https://ospace.tistory.com/999, 2025.04.02