베지에곡선은 점과 점을 잇는 선분을 이동하는 점의 이동경로를 표현한 것이다. 베지에곡선은 이런 점들을 시작점, 끝점, 조절점으로 구성하여 점의 이동경로를 계산하고 곡선으로 그린다. 연속되는 점은 곡선처럼 보인다. path 단어는 경로임을 이해하자. 무수히 많은 점이 직선으로 연결되고 그 직선을 이동하는 점의 이동경로를 알 수 있다면 곡선으로 표현이 가능하다.
svg path 패스 베지에곡선 이해
Bézier Curve
베지에곡선은 시작점, 끝점, 조절점으로 구성으로 구현되는 곡선을 말한다.
점의 이동경로를 곡선으로 표현함에 있어 조절점이 어디에 위치해 있는가에 따라 점이 이동경로가 연결되며 곡선이 그려진다.
베지에곡선을 수학적으로 이해하는 것은 어렵지만 개념적으로 이해하면 어렵지 않다.
베지에곡선 구성
베지에곡선은 시작점, 끝점, 조절점 으로 구성된다.
시작점과 끝점은 지정되어 있고 조절점의 위치에 따라 곡선이 그려진다.
조절점이 많을수록 곡선 또한 많아진다.
위의 이미지는 단순한 베지에곡선을 그리는 이미지이다.
P0 는 시작점이고 P2 는 끝점이다.
P1 은 조절점으로 P1의 위치에 따라 곡선이 그려진다.
이미지를 유심히 보도록 하자.
특히 초록색 직선을 보자.
시작점 P0와 조절점 P1을 지나는 녹색점이 있다.
조절점 P1과 끝점 P2를 지나는 녹색점이 있다.
각각의 녹색점이 이동하는 지점을 선으로 연결하면 녹색선이 생기고 이동하는 것이 보인다.
이 녹색선을 움직이는 점의 이동경로를 곡선으로 표현한 것이 베지에곡선이다.
svg 베지에곡선 구현
위의 이미지를 바탕으로 베지에곡선을 구현해 본다.
svg path를 이용하고 절대좌표로 표현한다.
svg path 에 대한 절대좌표 상대좌표는 아래 포스팅을 참고하자.
▶ svg path 패스 절대좌표 상대좌표 방향성 이해하기
<html>
<body>
<h1>SVG 베지에곡선 그리기</h1>
<svg height="300" width="300" style="border:1px solid black;">
<path d="M 50,250 Q 150,50 250,250"
stroke="#ff0000" fill="none" stroke-width="1" stroke-linecap="round" />
<path d="M 50,250 L 150,50"
stroke="#0000ff" fill="none" stroke-width="1" stroke-linecap="round" />
<path d="M 150,50 L 250,250"
stroke="#0000ff" fill="none" stroke-width="1" stroke-linecap="round" />
</svg>
</body>
</html>위의 코드를 분석해 보자.
간단한 베지에 곡선을 그리기 위해 Q 인자값을 사용했다.
- 시작점 M 50,250
- 끝점 250,250
- 조절점 Q150,50
위의 3개의 구성으로 간단한 베지에 곡선을 그려보았다.
조절점을 이동시켜 보자.
위의 코드를 조금 변경해서 조절점을 이동시켜 보도록 한다.
시작점과, 끝점은 고정시켰다.
조절점은 위에서 아래로 내려보낼 것이다.
<html>
<body>
<h1>SVG 베지에곡선 그리기</h1>
<svg height="300" width="300" style="border:1px solid black;">
<path d="M 50,150 Q 150,50 250,150"
stroke="#ff0000" fill="none" stroke-width="1" stroke-linecap="round" />
<path d="M 50,150 L 150,50"
stroke="#0000ff" fill="none" stroke-width="1" stroke-linecap="round" />
<path d="M 150,50 L 250,150"
stroke="#0000ff" fill="none" stroke-width="1" stroke-linecap="round" />
</svg>
<svg height="300" width="300" style="border:1px solid black;">
<path d="M 50,150 Q 150,150 250,150"
stroke="#ff0000" fill="none" stroke-width="1" stroke-linecap="round" />
<path d="M 50,150 L 150,150"
stroke="#0000ff" fill="none" stroke-width="1" stroke-linecap="round" />
<path d="M 150,150 L 250,150"
stroke="#0000ff" fill="none" stroke-width="1" stroke-linecap="round" />
</svg>
<svg height="300" width="300" style="border:1px solid black;">
<path d="M 50,150 Q 150,250 250,150"
stroke="#ff0000" fill="none" stroke-width="1" stroke-linecap="round" />
<path d="M 50,150 L 150,250"
stroke="#0000ff" fill="none" stroke-width="1" stroke-linecap="round" />
<path d="M 150,250 L 250,150"
stroke="#0000ff" fill="none" stroke-width="1" stroke-linecap="round" />
</svg>
</body>
</html>시작점과 끝점 조절점을 구성한다.
조절점은 위에서 아래로 이동한다.
- 시작점 M 50,150
- 끝점 250,150
- 조절점 이동 Q 150,50 Q 150,150 Q 150,250
n차 베지에곡선
위의 베지에 곡선은 간단한 형태의 베지에곡선으로 Quadratic Bezier curve 이다.
2차 베지에 곡선을 말한다.
조절점이 2개 이상인 베지에곡선은 C 인자값을 사용해야 한다.
위의 2차 베지에곡선이 그려지는 과정이 이해가 되었다면 3차 이상의 n차 베지에곡선이 어떻게 그려지는지 또한 이해가 될 것이다.
'programming > Graphics' 카테고리의 다른 글
| 알고두 사용법 튜토리얼 강좌 따라하기 algodoo (0) | 2021.12.28 |
|---|---|
| svg path 패스 3차 베지에곡선 이해 Cubic Bézier Curve (0) | 2021.09.17 |
| svg path 패스 절대좌표 상대좌표 방향성 이해하기 (0) | 2021.09.14 |
| svg path 패스 수평선 수직선 그리기 draw svg Horizontal Vertical line path (0) | 2021.09.12 |
| svg path 패스 직선 그리기 점의 이동경로를 직선으로 표현 draw svg line path (0) | 2021.09.10 |
댓글