[Sliverlight] Clipping

 

작성날짜    : 2011-04-19

참고 : http://msdn.microsoft.com/ko-kr/magazine/dd188700.aspx#id0080018

 

Clipping

특정 영역을 잘라 내는 것

클리핑 한 영역에 색을 입히거나 이미지를 보여 줄 수 있다.

절대 위치(컴퓨터 그래픽 화면상에 나타나는 고정된 점의 위치)로 배치된 요소만 클리핑 할 수 있다.

FrameworkElement 클래스를 사용

-      Silverlight 레이아웃에 참여하는 개체에 대한 공통 API프레임워크를 제공한다. Sliverlight의 데이터 바인딩, 개체 트리, 개체 수명 기능 영역과 관련된 API도 정의한다.

 

속성	설  명
Clip	개체의 콘텐츠 윤곽선을 정의하는 데 사용되는 Geometry를 가져오거나 설정한다.
CaptureMouse	Mouse를 캡처 하게 한다.
ReleaseMouseCapture	Mouse를 캡처한 경우 캡처를 해제한다.

 

Geometry 클래스를 사용

-      기하 도형을 정의하는 개체의 기본 클래스를 제공한다. Geometry 개체는 영역 클리핑에 사용할 수 있으며 2차원 그래픽 데이터를 Path로 렌더링하기 위해 기하 도형 정의로 사용할 수 있다.

 

EllipseGeometry 멤버

원 또는 타원 도형을 나타낸다.

멤  버	설  명
Center	EllipseGeometry의 중심점을 가져오거나 설정한다.
RadiusX	EllipseGeometry의 x 반지름 값을 가져오거나 설정한다.
RadiusY	EllipseGeometry의 y 반지름 값을 가져오거나 설정한다.

 

Shape 클래스 / 속성

도형 요소에 대해 기본 클래스를 제공한다.

속  성	설  명
Shape.Stroke	Shape 윤곽선을 칠하는 방법을 지정하는 Brush를 가져오거나 설정한다.
Shape.StrokeThickness	Shape 스트로크 윤곽선의 너비를 가져오거나 설정한다.
Shape.StrokeDashArray	도형의 윤곽선을 그리는 데 사용되는 대시 및 간격 패턴을 나타내는 Double 값 컬렉션을 가져오거나 설정한다.

 

그 외 속성

UIElement.RenderTransform 속성

-      UIElement의 렌더링 위치에 영향을 주는 변환 정보를 가져오거나 설정한다.

ScaleTransform 클래스

-      2차원 x-y 좌표계에서 개체의 배율을 조정한다.

 

속  성	설  명
CenterX	ScaleTransform 중심점의 X 좌표를 가져오거나 설정
CenterY	ScaleTransform 중심점의 Y 좌표를 가져오거나 설정
ScaleX	X 축 배율 인수를 가져오거나 설정
ScaleY	Y 축 배율 인수를 가져오거나 설정

 

 

예제 소스

 

<UserControl x:Class="Magn.Page"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >     <Grid x:Name="LayoutRoot">         <Canvas x:Name="RootCanvas" Width="800" Height="800" > <!-- Main Canvas -->             <Canvas x:Name="MainCanvas" Canvas.Left="0" Canvas.Top="0" Width="800"  Height="900"  MouseLeftButtonDown="OnMouseLeftButtonDown"              MouseMove="OnMouseMove" MouseLeftButtonUp="OnMouseLeftButtonUp" >                <Canvas Canvas.Left="90" Canvas.Top="30" Width="620" Height="470">                   <Rectangle Canvas.Left="0" Canvas.Top="0" Width="620" Height="470" Fill="White" />                   <Image Canvas.Left="10" Canvas.Top="10" Width="600" Height="450" Source="Images/Test.jpg" />                </Canvas>             </Canvas> <!-- Zoom Canvas -->             <Canvas x:Name="ZoomCanvas" Canvas.Left="0" Canvas.Top="0" Width="800" Height="900" Background="Black" Visibility="Collapsed">                 <Canvas.RenderTransform>                     <ScaleTransform CenterX="0" CenterY="0" ScaleX="4" ScaleY="4"/>                 </Canvas.RenderTransform>                 <Canvas.Clip>                   <EllipseGeometry x:Name="Lens" Center="0,0" RadiusX="40" RadiusY="40" />                 </Canvas.Clip>                 <Canvas Canvas.Left="90" Canvas.Top="30" Width="620" Height="470">                     <Rectangle Canvas.Left="0" Canvas.Top="0" Width="620" Height="470" Fill="White" />                     <Image Canvas.Left="10" Canvas.Top="10" Width="600" Height="450" Source="Images/Test.jpg" />                 </Canvas>                 <Path Canvas.Left="0" Canvas.Top="0" Stroke="#808080" StrokeThickness="1">                     <Path.Data>                         <EllipseGeometry x:Name="LensBorder" Center="0,0" RadiusX="40" RadiusY="40" />                     </Path.Data>                 </Path>             </Canvas>         </Canvas>     </Grid> </UserControl>

 

 

public partial class Page : UserControl {     bool _dragging = false;     const double _scale = 4.0;     public Page()     {         InitializeComponent();     } private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)     {         double x = e.GetPosition(RootCanvas).X;         double y = e.GetPosition(RootCanvas).Y;         PositionLens(x, y);         ZoomCanvas.Visibility = Visibility.Visible;         ((FrameworkElement)sender).CaptureMouse();         _dragging = true;     }     private void OnMouseMove(object sender, MouseEventArgs e)     {     if (_dragging)         {             double x = e.GetPosition(MainCanvas).X;             double y = e.GetPosition(MainCanvas).Y;             PositionLens(x, y);         }     }     private void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)     {         if(_dragging)         {             ZoomCanvas.Visibility = Visibility.Collapsed;             ((FrameworkElement)sender).ReleaseMouseCapture();             _dragging = false;         }     }     private void PositionLens(double x, double y)     {         Lens.Center = LensBorder.Center = new Point(x,y);         ZoomCanvas.SetValue(Canvas.LeftProperty, (1 - _scale) * x);         ZoomCanvas.SetValue(Canvas.TopProperty, (1 - _scale) * y);     } }

 

 

실행 화면