[wpf] Path

 

 안녕하세요, 요즘 저는 [Microsoft Control Style & Template 톺아보기] 시리즈를 준비하고 있습니다. 내용들을 준비하면서 글을 쓰다 보니 생각보다 Path의 빈도가 높았습니다. Path의 경우 매번 설명하기에는 양이 많고 그렇다고 설명을 넘어가기에는 좀 아쉬운 부분이 있어 따로 글을 작성하게 되었습니다.

 

 

 

Path

Path?

 WPF에서 무언가를 그릴 때에는 Line, Rectangle, Ellipse, Polygon 등 제공된 것들을 사용합니다. 하지만 이러한 것들은 복잡한 도형을 그릴 때에는 적합하지 않습니다. 그래서 WPF에서는 복잡한 도형을 그릴 때 Path를 사용합니다.

 

---

 

Path Property

 WPF의 다른 Control들과 마찬가지로 Path 또한 많은 기본 속성들을 가지고 있습니다. 이번 글에서는 Path를 사용하기 위해서 가장 기본적으로 필요하다고 생각이 되는 Stroke, StrokeThickness, Fill과 Data에 대해서 간단하게 정리해보겠습니다.

 

Stroke

 윤곽선의 색을 설정합니다. 값의 경우 정의된 색을 사용하거나 16진수로 사용할 수 있습니다.

<Path Stroke="Red"/>
<Path Stroke="#ffff0000"/>

 

StrokeThickness

 윤곽선의 두께를 설정합니다.

<Path StrokeThickness="3"/>
<Path StrokeThickness="1"/>

 

Fill

 도형의 내부의 색을 설정합니다. 값의 경우 정의된 색을 사용하거나 16진수로 사용할 수 있습니다.

<Path Fill="Beige"/>
<Path Fill="#ff0000ff"/>

 

Data

 그릴 모양을 지정하는 Geometry를 설정합니다. Data에 정의되어있는 명령어를 이용하여 좌표를 이동하면서 도형을 그립니다.

⭐ 명령어를 사용할 때 대문자의 경우 절대 위치이며 소문자의 경우 상대 위치를 나타냅니다.

 

---

 

Data Command

M

 이동 명령으로 시작점을 지정합니다.

사용법 :  M x y  ,  m dx dy  

 

Z

 현재 점을 시작점까지 연결하여 패스를 닫습니다.

사용법 :  Z  ,  z  

 

 

직선과 관련된 명령어

L

 현재 점에서 x, y점으로 직선을 그립니다.

사용법 :  L x y  ,  l dx dy  

<Path Data="M 25 0 L 0 50 50 50 z"/>
<Path Data="M 0 0 l 0 50 50 0 0 -50 z"/>

 

H

 현재 점에서 x점으로 수평선을 그립니다.

사용법 :  H x  ,  h dx  

 

V

 현재 점에서 y점으로 수직선을 그립니다.

사용법 :  V y  ,  v dy  

<Path Data="M 0 0 V 0 50 H 50 50 V 50 0 z"/>
<Path Data="M 0 0 v 0 50 h 0 50 v -50 0 z"/>

 

 

3차원 곡선 관련 명령어

C

 점(x1, y1) 매개 변수를 곡선의 시작 부분 제어점으로 사용하고, 마지막 제어점으로 점(x2, y2) 매개 변수를 사용하여 현재 점에서 곡선을 그립니다.

사용법 :  C x1 y1, x2 y2, x y  ,  c dx1 dy1, dx2 dy2, dx dy  

 

S

 간단한 형태의 3차 베지어 곡선 명령어입니다. 한 선의 제어점을 다른 선의 제어점과 반대 방향으로 그어 완만한 경사를 만들어야 할 때 사용됩니다.

사용법 :  S x2 y2, x y  ,  s dx2 dy2, dx dy  

<Path Data="M 3 24 C 12 3 18 3 27 24 S 45 45 54 24"/>

 

 

2차원 곡선 관련 명령어

Q

 2차원 곡선으로 하나의 컨트롤 포인트를 가지는 것을 제외하고는 3차 베지어 곡선과 유사합니다. 시작점과 끝점 사이에 위치한 컨트롤 포인트가 곡선의 모양을 결정합니다.

사용법 :  Q x1 y1, x y  ,  q dx1 dy1, dx dy  

 

T

 2차 곡선을 이어 긋습니다. T 이전의 명령어가 Q나 T가 아닐 경우 직선이 되고 Q나 T가 올 경우 곡선이 자동 생성되어 조절점이 생략됩니다.

사용법 :  T x y  ,  t dx dy  

<Path Data="M 3 24 Q 15 3 27 24 T 48 24"/>

 

 

곡선 명령어

A

 x, y 축 반지름이 주어졌을 때, 두 점을 연결할 수 있는 타원은 2개가 있으며, 각각의 타원에서 두 점을 잇는 패스 또한 2개씩 있기 때문에 어떤 상황에서든 4 종류의 호를 그릴 수 있습니다.

참고 사이트 이미지

사용법 :  A rx ry x-axis-rotation large-arc-flag sweep-flag x y  ,  a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy  

<Path Data="M  0 30 a 30 30 0 0 0 30 30"/>
<Path Data="M 15 15 a 30 30 0 0 1 30 30"/>
<Path Data="M 15 15 a 30 30 0 1 0 30 30"/>
<Path Data="M 15 30 a 30 30 0 1 1 30 30"/>

---

참고 사이트

• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#line_commands
• https://jxnblk.github.io/paths/ : 간편 테스트 가능(※ 단, A 명령어는 없음)
• https://www.w3.org/TR/SVG/paths.html