C# WPF Path 그리기(1)

C# WPF에서는 Path 클래스를 사용하여 경로를 그릴 수 있습니다. Path 클래스는 선, 곡선, 직선 등 다양한 유형의 도형을 그릴 수 있는 방법을 제공합니다.

Path 클래스를 사용하여 경로를 그리는 기본적인 단계는 다음과 같습니다.

1. XAML 파일에서 Path 요소를 만듭니다

<Path Stroke="Black" StrokeThickness="1" Data="M 10,10 L 100,100"/>

2. Data 속성을 사용하여 경로를 지정합니다. "M"은 시작점을 나타내고 "L"은 선을 그리는 데 사용됩니다. 이 경우 (10,10)에서 시작하여 (100,100)까지 선을 그립니다.

3. Stroke 속성과 StrokeThickness 속성을 사용하여 선의 색상과 두께를 설정합니다.

여기서 Path 데이터 문자열에는 여러 가지 다른 기호도 있습니다. 다음은 가장 일반적인 몇 가지 문자 기호입니다.

• M (MoveTo) : 새로운 시작점을 설정합니다. 이전 그리기가 끝난 지점에서 시작점으로 이동합니다.
• L (LineTo) : 직선 선분을 그립니다.
• H (Horizontal LineTo) : 수평선을 그립니다. 지정된 x 좌표로 이동하고 y 좌표는 이전 위치와 동일합니다.
• V (Vertical LineTo) : 수직선을 그립니다. 지정된 y 좌표로 이동하고 x 좌표는 이전 위치와 동일합니다.
• C (CurveTo) : 베지어 곡선을 그립니다.
• Q (Quadratic Bezier CurveTo) : 이차 베지어 곡선을 그립니다.
• A (ArcTo) : 호를 그립니다.
• Z (ClosePath) : 도형을 닫습니다. 시작점과 현재 위치를 선으로 연결하여 도형을 완성합니다.

예를 들어, 다음은 시작점에서 (100, 100)으로 이동한 후, (200, 100)과 (200, 200)을 지나는 곡선을 그리고, (300, 200)까지 선을 그리고, (100, 200)에서 시작점으로 돌아가는 경로를 나타내는 Path 데이터 문자열입니다.

string pathData = "M 0 0 L 100 100 C 200 100 200 200 300 200 L 400 200 Z";

위의 예제에서 M은 시작점을 나타내고 L은 직선을 그리는 데 사용됩니다. C는 베지어 곡선을 그리는 데 사용되며, Z는 경로를 닫는 데 사용됩니다. 이러한 문자 기호를 조합하여 원하는 도형을 그릴 수 있습니다.

*하지만 이는 어려운 과정이다 보니 쉽게 Path를 얻을 수 있는 방법이 있습니다.

728x90

MS에서 제공하는 XAML path Icons 라는 스토어를 통해 내가 원하는 Icon의 path를 받아올 수 있습니다. 아래는 해당 store의 주소입니다.

https://apps.microsoft.com/store/detail/xaml-path-icons/9MTBNQSZ9NZ9?hl=en-us&gl=us 

Get XAML Path Icons from the Microsoft Store

물론 C# 자체만을 이용해서도 라인을 그릴 수 있습니다. 아래는 그 예시 코드입니다.

Path path = new Path();
path.Stroke = Brushes.Black;
path.StrokeThickness = 1;

PathGeometry pathGeometry = new PathGeometry();
PathFigure pathFigure = new PathFigure();
pathFigure.StartPoint = new Point(10, 10);
LineSegment lineSegment = new LineSegment(new Point(100, 100), true);
pathFigure.Segments.Add(lineSegment);
pathGeometry.Figures.Add(pathFigure);

path.Data = pathGeometry;

이 코드에서는 Path 클래스의 Data 속성 대신 PathGeometry 클래스를 사용하여 경로를 정의합니다. PathGeometry 클래스는 PathFigure 개체의 컬렉션으로 구성됩니다. 각 PathFigure 개체는 시작점과 여러 개의 선 또는 곡선 Segment 개체로 구성됩니다.

위의 코드를 실행하면 XAML 파일에서 Path 요소를 사용한 경우와 동일한 결과가 생성됩니다.

다음 시간에는 다른 Path 클래스와 속성들에 대해 자세히 설명드리겠습니다.