[Controls] 23. Element:Shape (Path - 1)

이번시간에는 path에 대해 알아보자. path는 거의 모든 도형을 다 만들수 있습니다. Data 속성에 의해서 다양한 모양을 표현합니다. 선, 원, 곡선.... 등 복합적인 도형의 모습을 표현할 수 있습니다.

path의 작성방법에는 두가지 유형이 있는데 StreamGeometry와 'PathFigureCollection 두가지가 있습니다.
StreamGeometry는 Data를 일렬로 나열하여 도형을 그리고 'PathFigureCollection은 하나의 노드를 뽑아서 원,호, 다양한 도형을 표현할 수 있습니다

그러면 각각의 형식에 대하여 예제를 통해 알아 보겠습니다.

그림 1.Path 실행

예제 코드를 보면 조금 형식이 틀리다는 것을 알수 있습니다. 그중에 첫번째 StreamGeometry를 보면 Data의 속성값에 M, C... 등 알파벳이 있다. M은 MOVE 이동이며 C : Cubic Bezier Curve 곡선을 뜻합니다. 이런식으로 해서 다양한 값을 주면 여러가지 형태의 도형을 표현할 수 있습니다.

M : Move
L : Line
H : Horizontal Line
V : Vertical Line
C : Cubic Bezier Curve
Q : Quadratic Bezier Curve
S : Smooth cubic Bezier curve
A : Elliptical Arc
Z : Close
P : Point

Data의 속성값에 들어가는 약자입니다.

두번째 형식은 Path.Data의 노드를 따로 뽑아서 여러가지 형태의 중첩된 도형을 만들 수 있습니다.

PathFigureCollection
EllipseGeometry
LineGeometry
RectangleGeometry
PathGeometry
GeometryGroup
CombinedGeometry

<Window x:Class="wpf23.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="450" Width="600">
   
        <Canvas Margin="0,0,0,8">
            <Path Stroke="Red" Canvas.Top="30" Canvas.Left="15"
                Data="M 10, 100 C 10, 300, 300, -200, 300, 100" />
               
            <Path Stroke="Blue" Canvas.Top="200" Canvas.Left="270">
                <Path.Data>
                    <PathGeometry Figures="M 10, 100 C 10, 300,
                                300 -200, 300, 100" />
                </Path.Data>
            </Path>
        </Canvas>
</Window>

실형결과를 보면 형식은 다르나 결과는 동일하다는 것을 확인할 수 가 있습니다.

다음시간에는 StreamGeometry와 'PathFigureCollection에 대한 다양한 속성값을 적용하여 여러가지 도형을 작성해보겠습니다.


※ 테스트 환경
-----------------------------------------------------------------------------------------
운영체체 : Windows Vista Ultimate 32bit
개발툴 : Microsoft Visual C# Codename "Orcas"
-----------------------------------------------------------------------------------------