본문 바로가기
.NET WPF

[Controls] 24. Element:Shape (Path - 2)

by 태디 2007. 2. 1.
728x90
이번시간에는 지난시간에 이어 Path에 대해 좀더 자세히 알아보겠습니다. geometry는 말그대로 도형이라는 뜻 이외에 기하학이라는 뜻도 가지고 있습니다. 'PathFigureCollection 형식에는 여러가지 노드가 존재합니다.

PathFigureCollection
EllipseGeometry
LineGeometry
RectangleGeometry
PathGeometry
GeometryGroup
CombinedGeometry

가장 먼저 LineGeometry를 알아보겠습니다.

그림 1.LineGeometry

<Window x:Class="wpf24.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 StrokeThickness="1" Stroke="Black">
           
<Path.Data>
               
<LineGeometry StartPoint="10,20" EndPoint="100,130" />
            </
Path.Data>
       
</Path>
   
</Canvas>
</Window>

가장 중요한 속성은 StartPoint와 EndPont입니다. Line의 X1, Y1, X2, Y2의 값을 지정하는 것과 비슷합니다. StartPoint 의 첫번째 값과 두번째값은 Line의 X1,Y1의 좌표값과 동일합니다. EndPont의 첫번째와 두번째 값 역시 Line의 X2, Y2와 같다는 것을 알 수 있습니다.

그림 2.RectangleGeometry

<Window x:Class="wpf24.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 StrokeThickness="1" Stroke="Black" Fill="LemonChiffon"
            Canvas.Left
="20" Canvas.Top="20">
           
<Path.Data>
               
<RectangleGeometry Rect="100,100,100,100"/>
            </
Path.Data>
       
</Path>
   
</Canvas>
</Window>

Rect 속성을 보면 첫번째와 두번째 Canvas를 기준으로 현재 사각형의 좌표이고 세번째와 네번째 값은 각각 가로(Height), 세로(Width)의 길이를 나타냅니다.

그림 3.EllipseGeometry


<Window x:Class="wpf24.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 StrokeThickness="1" Stroke="Black" Fill="Gold"
            Canvas.Left
="20" Canvas.Top="20">
           
<Path.Data>
               
<EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50"/>
            </
Path.Data>
       
</Path>
   
</Canvas>
</Window>

Center 값 50, 50을 기준으로 X측 Y측 반지름이 50인 원을 그립니다.
이것 역시  Shape클래스의 Ellipse(원)와 유사하다.

그림 4.CombinedGeometry  (UNION)

<Window x:Class="wpf24.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 StrokeThickness="1" Stroke="Black" Fill="#CCCCFF"
            Canvas.Left
="20" Canvas.Top="20">
           
<Path.Data>
               
<CombinedGeometry GeometryCombineMode="Union">
                   
<CombinedGeometry.Geometry1>
                       
<EllipseGeometry RadiusX="50" 
                                RadiusY
="50" Center="75,75" />
                    </
CombinedGeometry.Geometry1>
                   
<CombinedGeometry.Geometry2>
                       
<EllipseGeometry RadiusX="50" RadiusY="50" 
                                Center
="127,75" />
                    </
CombinedGeometry.Geometry2>
               
</CombinedGeometry>
           
</Path.Data>
       
</Path>
   
</Canvas>
</Window>

도 원이 합쳐진 것을 볼 수 있다. 우리가 초등학교때 배웠던 합집합을 보는것 같지 않으십니까? 두 도형이 교차되는 부분을 포함해서 합쳐진 전체를 그립니다.

그림 5.RectangleGeometry  (XOR)


<Window x:Class="wpf24.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">
       
<Rectangle Width="150" Height="150" Canvas.Left="50" Canvas.Top="50">
           
<Rectangle.Fill>
               
<LinearGradientBrush>
                   
<GradientStop Color="Yellow" Offset="0.0" />
                    <
GradientStop Color="Orange" Offset="0.5" />
                    <
GradientStop Color="Red" Offset="1.0" />
                </
LinearGradientBrush>
           
</Rectangle.Fill>
       
</Rectangle>
   
</Canvas>
</Window>



그림 6.그라데이션 효과

<Window x:Class="wpf24.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 StrokeThickness="1" Stroke="Black" Fill="#CCCCFF"
            Canvas.Left
="20" Canvas.Top="20">
           
<Path.Data>
               
<CombinedGeometry GeometryCombineMode="Xor">
                   
<CombinedGeometry.Geometry1>
                       
<EllipseGeometry RadiusX="50" 
                                RadiusY
="50" Center="75,75" />
                    </
CombinedGeometry.Geometry1>
                   
<CombinedGeometry.Geometry2>
                       
<EllipseGeometry RadiusX="50" RadiusY="50" 
                                Center
="127,75" />
                    </
CombinedGeometry.Geometry2>
               
</CombinedGeometry>
           
</Path.Data>
       
</Path>
   
</Canvas>
</Window>


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

댓글