C# WPF Path 그리기(3)

이전에 WPF Path 그리기 글을 단계적으로 설명드리도록 하겠습니다. 이전 글이 궁금하신 분들은 아래 글을 참고해주세요.

2023.04.12 - [Languages/C#] - C# WPF Path 그리기(1)

C# WPF Path 그리기(1)

728x90

2023.04.12 - [Languages/C#] - C# WPF Path 그리기(2)

C# WPF Path 그리기(2)

1. 먼저 XAML에서 Path를 선언합니다.

<Path Stroke="Black" StrokeThickness="1">
    <Path.Data>
        <!-- PathGeometry and PathFigure here -->
    </Path.Data>
</Path>

---

2. PathGeometry를 생성하고 그 안에 PathFigure를 추가합니다.

<PathGeometry>
    <PathFigure StartPoint="10,10">
        <!-- LineSegment, ArcSegment, BezierSegment, etc. here -->
    </PathFigure>
</PathGeometry>

---

3. PathFigure 내에 다양한 세그먼트(Segment)를 추가하여 원하는 경로를 만듭니다. 세그먼트는 StartPoint를 기준으로 그려지며, 이전 세그먼트의 끝점이 다음 세그먼트의 시작점이 됩니다.

<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" />
    <!-- Other segment types here -->
</PathFigure>

---

4. 각 세그먼트는 고유한 속성을 가집니다. 예를 들어, LineSegment는 Point 속성을 사용하여 끝점을 지정하며, ArcSegment는 Size, RotationAngle, IsLargeArc, SweepDirection 등의 속성을 사용하여 호의 크기, 방향 등을 지정합니다.

<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" />

더 자세하게 설명드리면,

*LineSegment는 Point 속성을 사용하여 끝점을 지정합니다. 이 속성을 조정하면 선분의 길이나 방향 등을 변경할 수 있습니다.

*ArcSegment는 호를 그리는 데 사용되는 세그먼트입니다. 이 세그먼트는 다음과 같은 속성을 가집니다.

• Point: 호의 끝점을 지정합니다.
• Size: 호의 크기를 지정합니다. Width와 Height를 나타내는 Size 구조체로 표현됩니다.
• RotationAngle: 호의 회전 각도를 지정합니다. 단위는 도(degree)이며, 기본값은 0입니다.
• IsLargeArc: 큰 호를 그릴지 여부를 나타냅니다. true일 경우, 180도보다 큰 호를 그립니다.
• SweepDirection: 호를 그리는 방향을 지정합니다. Clockwise일 경우 시계방향으로 그리며, Counterclockwise일 경우 반시계방향으로 그립니다.

*BezierSegment는 곡선을 그리는 데 사용되는 세그먼트입니다. 이 세그먼트는 Point1, Point2, Point3 속성을 사용하여 시작점, 제어점1, 제어점2, 끝점을 지정합니다. 이 세 점을 이용하여 곡선의 모양을 조정할 수 있습니다.

*PolyLineSegment는 여러 개의 선분을 연결하여 경로를 그리는 데 사용됩니다. Points 속성을 사용하여 여러 개의 점을 지정합니다.

*PolyBezierSegment는 여러 개의 곡선을 연결하여 경로를 그리는 데 사용됩니다. Points 속성을 사용하여 여러 개의 점을 지정합니다.

*PolyQuadraticBezierSegment는 여러 개의 이차 베지어 곡선을 연결하여 경로를 그리는 데 사용됩니다. Points 속성을 사용하여 여러 개의 점을 지정합니다.

이 외에도 다양한 세그먼트가 있으며, 각각의 세그먼트는 자신만의 고유한 속성을 가지고 있습니다. 이러한 속성들을 이용하여 경로를 다양하게 그릴 수 있습니다.

---

5. PathGeometry 내에서 여러 개의 PathFigure를 사용하여 복잡한 경로를 그릴 수도 있습니다.

<PathGeometry>
    <PathFigure StartPoint="10,10">
        <!-- Segments for the first figure -->
    </PathFigure>
    <PathFigure StartPoint="250,10">
        <!-- Segments for the second figure -->
    </PathFigure>
    <!-- More figures here -->
</PathGeometry>

---

6. Path의 Stroke 및 StrokeThickness 속성을 사용하여 경로의 선 색상 및 굵기를 지정할 수 있습니다.

<Path Stroke="Black" StrokeThickness="1">

---

7. 그 외에도 Fill, FillRule, StrokeDashArray, StrokeDashCap 등의 다양한 속성을 사용하여 Path의 모양을 조정할 수 있습니다.

<Path Fill="Red" FillRule="EvenOdd" StrokeDashArray="5 2" StrokeDashCap="Round">

Path에 대한 속성 중 일부를 더 자세히 살펴보겠습니다.

• Fill: Path 내부를 채우는 데 사용되는 색상을 지정합니다.
• FillRule: Path 내부를 채우는 방법을 지정합니다. "EvenOdd" 또는 "NonZero" 값이 가능합니다.
• Stroke: Path 경계선을 그리는 데 사용되는 색상을 지정합니다.
• StrokeThickness: Path 경계선의 굵기를 지정합니다.
• StrokeDashArray: 경계선을 이루는 선의 패턴을 지정합니다. 예를 들어 "5 2"는 5px의 선을 그리고 2px의 간격을 두 번 반복합니다.
• StrokeDashCap: 경계선 패턴에서 끝 부분의 모양을 지정합니다. "Flat", "Round", "Triangle" 값이 가능합니다.

위와 같은 속성들을 조합하여 다양한 모양의 경로를 그릴 수 있습니다. 또한 Data Binding을 사용하여 동적으로 경로를 생성할 수도 있습니다. 이를 활용하면 다양한 효과를 구현할 수 있습니다.

위와 같은 방식과 앞서 설명한 특성을 사용하여 WPF에서 원하는 모양을 그릴 수 있습니다.