C# WPF Path 그리기(2)

C# 에는 여러개의 path 관련 클래스가 존재합니다. 아래는 MS 공식문서의 Path 클래스 문서입니다.

https://learn.microsoft.com/ko-kr/dotnet/api/system.windows.shapes.path?view=windowsdesktop-7.0 

Path 클래스 (System.Windows.Shapes)

C# WPF에서 도형을 그리기 위해 Path 클래스를 사용할 수 있습니다. Path 클래스는 Geometry 클래스를 기반으로 하며, 여러 도형을 만들기 위한 다양한 속성을 제공합니다.

Path 클래스는 Data 속성을 사용하여 도형을 정의합니다. Data 속성은 PathGeometry 클래스의 인스턴스를 받습니다. PathGeometry 클래스는 여러 개의 PathFigure 클래스로 구성됩니다. PathFigure 클래스는 하나의 도형을 나타내며, 시작점과 라인, 베지어 곡선 등의 정보를 포함합니다.

Data 속성에 관한 글은 전에 C# WPF Path 그리기(1)을 참조해주세요.

다음은 간단한 Path 클래스 예제입니다.

<Path Stroke="Black" StrokeThickness="1">
    <Path.Data>
        <PathGeometry>
            <PathFigure StartPoint="10,10">
                <LineSegment Point="100,100" />
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Path>

 

위의 예제에서는 검은색 선으로 굵기 1의 선을 그리는 도형을 정의합니다. 시작점은 (10,10)이며, (100,100)까지 직선을 그립니다.

PathFigure 클래스에는 여러 속성이 있습니다. StartPoint 속성은 도형의 시작점을 나타내며, Segments 속성은 PathSegment의 컬렉션을 받습니다. PathSegment는 PathFigure에서 라인, 베지어 곡선 등을 그리는 데 사용되는 기본 클래스입니다. LineSegment 클래스, BezierSegment 클래스 등이 PathSegment의 하위 클래스로 제공됩니다.

다음은 좀 더 복잡한 Path 클래스 예제입니다.

<Path Stroke="Black" StrokeThickness="1">
    <Path.Data>
        <PathGeometry>
            <PathFigure StartPoint="10,10">
                <LineSegment Point="50,50" />
                <ArcSegment Point="90,10" Size="50,50" RotationAngle="45" IsLargeArc="True" SweepDirection="Clockwise" />
                <BezierSegment Point1="120,10" Point2="160,50" Point3="200,10" />
            </PathFigure>
            <PathFigure StartPoint="250,10">
                <PolyBezierSegment Points="300,10 330,50 360,10" />
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Path>

위 예제에서는 Path 클래스를 사용하여 두 개의 도형을 그리고 있습니다.

첫 번째 도형은 선, 호, 베지어 곡선을 그리고 있습니다. StartPoint 속성을 사용하여 시작점을 (10,10)으로 지정하고, LineSegment 메서드를 사용하여 (50,50)까지 선을 그립니다. 그 다음, ArcSegment 메서드를 사용하여 (50,50)에서 (90,10)으로 가는 호를 그리고, Size 속성과 IsLargeArc 속성을 사용하여 호의 크기와 크기가 180도를 초과하는지 설정합니다. 마지막으로 BezierSegment 메서드를 사용하여 (90,10)에서 (200,10)까지 베지어 곡선을 그립니다.

두 번째 도형은 PolyBezierSegment 메서드를 사용하여 베지어 곡선을 그리고 있습니다. StartPoint 속성을 사용하여 시작점을 (250,10)으로 지정하고, PolyBezierSegment 메서드를 사용하여 (300,10), (330,50), (360,10) 세 개의 점을 이용하여 베지어 곡선을 그립니다.

두 도형 모두 PathFigure 클래스를 사용하여 정의하였으며, PathGeometry 클래스를 사용하여 두 개의 PathFigure를 하나로 묶어주었습니다.

Path 클래스는 Stroke 속성과 StrokeThickness 속성을 사용하여 선의 색과 두께를 지정할 수 있습니다. 첫 번째 도형은 검은색 선으로 굵기가 1인 선을 그리고 있습니다.

위 예제에서는 Path 클래스와 PathGeometry 클래스의 메서드와 속성을 사용하여 여러 도형을 그리는 방법을 볼 수 있습니다.

---

다음은 여러가지 Segment 클래스와 그 내용입니다.

 

1. LineSegment 클래스

LineSegment 클래스는 두 개의 포인트 사이에 직선 세그먼트를 나타냅니다.

2. BezierSegment 클래스

BezierSegment 클래스는 두 개의 컨트롤 포인트를 사용하여 베지어 곡선 세그먼트를 나타냅니다. 여기서 베지어 곡선은 시작점과 끝점이 주어졌을 때, 이들을 연결하는 부드러운 곡선을 생성하는 수학적인 함수입니다. 여러 개의 제어점(control point)을 사용하여 곡선을 조절하며, 각 제어점은 곡선의 모양과 위치를 결정하는데 영향을 미칩니다

3. ArcSegment 클래스

ArcSegment 클래스는 호를 그리는 세그먼트입니다. 시작점, 종료점, 호의 크기 및 방향 등을 지정할 수 있습니다.

4. PolyQuadraticBezierSegment 클래스

여러 개의 2차 베지어 곡선을 연결하여 그리는 세그먼트입니다.

이 외에도 많은 Segment 클래스가 존재하고, 원하고자 하는 Path를 그리기 위해 시작점과 종료점, 크기를 지정해주어야 합니다.