2차 베지어 곡선을 활용한 펜 드로잉 보정 방법

캔버스에서 드로잉을 구현하는데, 마우스 좌표의 샘플링 수준에 따라서 직선으로 표시되는 영역이 존재한다. 이는 마우스 또는 펜 좌표의 샘플링 수준이 부족하거나 선을 그리는 작업에서 오버 헤드로 인해서 UI 작업이 끊겨 샘플링이 부족한 경우 발생한다.

두번 째 그림의 선은 마우스 좌표를 천천히 움직였을 때 그려진 모습을 나타낸 것이다. 선을 이루는 정점의 좌표가 촘촘하기에 크게 직선 처럼 느껴지는 구간은 거의 없다.

따라서 선을 그릴 때 직선 구간이 큰 경우 샘플링을 수동적으로 수행하여 곡선 느낌이 나도록 매꾸어주는 작업을 수행해야 한다.

이럴 때 베지어 곡선을 사용해서 선을 부드럽게 보정할 수 있다.

Bezier Curve 위키 링크

베지어 곡선은 종류가 여러가지 존재하는데, 여기서 사용할 곡선 종류는 2차 베지어 곡선이다.

let u = 1 - t; ((u * u) * startPoint.x + (2 * u * t) * controlPoint.x + (t * t) * endPoint.x, (u * u) * startPoint.y + (2 * u * t) * controlPoint.y + (t * t) * endPoint.y);

식으로 나타내면 아래와 같다.

{(1 - t)}^{2} P_{0} + 2 (1 - t) t P_{1} + t^{2} P_{2}

2차 베지어 곡선은 시작점, 제어점, 끝점을 통해 곡선을 샘플링한다. 시작점과 끝점은 흔히 두 선분을 이루는 각각의 점으로 볼 수 있고, 제어점이 비로소 곡선의 방향과 정도를 결정한다.

각 빨간점이 왼쪽에서 부터 시작점, 제어점, 끝점을 나타낸다. 시작점과 끝점은 당연하게 선분의 시작, 끝점인데, 제어점을 어떻게 해야할지 주요 고민 사항이라 볼 수 있다. 나 같은 경우는 이전 선의 속도 + 현재 선의 방향(크기 포함)을 평균낸 벡터의 0.5 정도를 제어점으로 지정하였다.

베지어 곡선은 t 0 ~ 1 범위에서 원하는 위치의 곡선을 샘플링할 수 있다. 나 같은 경우 0.5 정 중간에 있는 곡선 점만 샘플링해서 점에 추가하는 식으로 구현하였다.

특히 필기 소프트웨어에 베지어 곡선을 적용하기 위해서, 사용자가 직접 제어점을 조작하는 형식이 아니기 때문에, 이전 선분의 속도 벡터를 구하고(즉 이전 선분에서 끝점 - 시작점), 현재 선분의 속도 베터를 구한뒤 이 두 속도 베터의 평균을 구하여 0.5배한다. 그리고 현재 선분의 시작점에 평균 속도 벡터를 더하여 제어점을 구하는 식으로 구현하였다.

정 중앙 1개만 샘플링한 경우 위와 같은 결과가 도출되고,

3개 정도 샘플링한 경우 위와 같이 부드러워지는 것을 확인할 수 있다.