Transforming 탐색記 (2편)

이번에는 SkewTransform과 RotateTransform에 대해서 적을까 한다.

 

Skew란 비스듬한, 구부러진, 휨이라는 뜻으로 하나의 오브젝트의 형태가 원래의 형태를 벗어나서 새로운 형태의 오브젝트로 만들어 지는 것을 말한다. 예를 들면 사각형이 마름모의 형태를 띈다거나 하는 것이다.

 

그럼 속성을 파헤쳐 보자. SkewTransform의 경우 모두 5개의 속성을 가지고 있다. 모두가 알다시피 Name속성, 그리고 이전에 글에서 CenterX와 CenterY에 대해서 조금이나마 자세하게 글을 적었고, 나머지는 AngleX와 AngleY이다. 여기서 또다시 벽에 부딪혔었는데 AngleX와 AngleY의 값을 입력하면 모양이 변형되는데 그럼 내가 원하는 모양을 만들고 싶을 때 값을 어떻게 입력해야 원하는 모양이 제대로 나오는 것인가 라는 것이다. 여기서도 Blend의 효과를 보았다. Blend의 경우 에디터 창에서 값을 입력하면 바로 디자인 창에 적용된 값을 볼 수가 있어서 속성의 변화에 따른 오브젝트의 변화를 쉽게 관찰할 수가 있다.

 

말로 적는 것보다 샘플을 보면서 설명하는 편이 이해하기도 쉽다. 아래의 샘플을 보자.

 

<Canvas x:Name="parentCanvas"

        xmlns="http://schemas.microsoft.com/client/2007"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Width="640"

        Height="480"

        Background="White"

        >

        <!-- 초기 붉은 색 사각형 -->

        <Rectangle Width="100" Height="100" Stroke="#FFFF0000" Canvas.Left="100" Canvas.Top="100">

               <Rectangle.RenderTransform>

                       <ScaleTransform ScaleX="1.0" ScaleY="1.0" CenterX="0.0" CenterY="0.0"/>

               </Rectangle.RenderTransform>

        </Rectangle>

        <!-- SkewTransform 테스트를 위한 샘플 1 (푸른색 사각형) -->

        <Rectangle Width="100" Height="100" Stroke="#FF0000FF" Canvas.Left="100" Canvas.Top="100" RenderTransformOrigin="0.0,0.0">

               <Rectangle.RenderTransform>

                       <SkewTransform AngleX="45.0" AngleY="0.0" CenterX="0.0" CenterY="0.0"/>

               </Rectangle.RenderTransform>

        </Rectangle>

        <!-- SkewTransform 테스트를 위한 샘플 2 (녹색 사각형) -->

        <Rectangle Width="100" Height="100" Stroke="#FF00FF00" Canvas.Left="100" Canvas.Top="100" RenderTransformOrigin="0.0,0.0">

               <Rectangle.RenderTransform>

                       <SkewTransform AngleX="0.0" AngleY="45.0" CenterX="0.0" CenterY="0.0"/>

               </Rectangle.RenderTransform>

        </Rectangle>

</Canvas>

 

SkewTransform도 원점의 역할이 상당히 중요한데 푸른색 사각형을 먼저 보자. 이 사각형은 원점을 중심으로 오른쪽으로 45도 정도 기울어진 형태를 취하고 있다. 즉, 원점이 어디에 있냐에 따라서 오브젝트의 위치가 많이 달라진다. 위의 경우는 왼쪽 상단이 원점을 가지고 있기 때문에 원점을 중심으로 45도로 기울어진 형태를 취한다. 그리고 녹색 사각형의 경우도 원점을 중심으로 45도 아래쪽으로 기울어진 형태이다. 자~~ 그럼 각각의 값에다가 음수를 입력하면 어떻게 될까? 당연히 반대방향을 향한다. 이 때에도 원점을 중심으로 모든 것이 변환이 된다. 아래의 그림은 음수를 입력하고 난 후에 변형된 값이다.

 

 

자 그럼 이제 원점을 (50, 50)으로 이동을 시키고 나면 어떻게 될까? 이동을 시켜도 각 좌표의 위치만 변경될 뿐 모양에는 변형이 없다. 원래 컴퓨터 그래픽스에서 객체의 변형은 각 좌표의 위치(여기에서는 4개의 좌표)에 행렬 값을 곱한다. 곱하고 난 후에 기본적인 형태는 그대로 유지한 체 원점이 이동됨으로 인해서 객체도 이동을 하게 된다. 아래의 그림은 원점을 (50, 50)으로 이동시키고 난 후에 결과를 보여준다.

 

 

 

이번에는 RotateTransform에 대해서 알아보자.

RotateTransform의 경우는 모두 4개의 속성을 가지고 있다. Name, CenterX, CenterY, 그리고 마지막으로 Angle이다. 회전의 경우는 객체가 좌표의 중심을 축으로 해서 몇 도 기울어져 있는가를 표현할 때 사용한다. 간단한 샘플부터 보자.

 

<Canvas x:Name="parentCanvas"

        xmlns="http://schemas.microsoft.com/client/2007"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Width="640"

        Height="480"

        Background="White"

        >

        <!-- 원점 표시 -->

        <Ellipse Canvas.Left="98" Canvas.Top="98" Width="5" Height="5" Fill="Red" Canvas.ZIndex="1" />

        <!-- 초기 붉은 색 사각형 -->

        <Rectangle Width="100" Height="100" Stroke="#33FF0000" Canvas.Left="100" Canvas.Top="100" Fill="#22FF0000" />

        <!-- RotateTransform 테스트를 위한 샘플 1  -->

        <Rectangle Width="100" Height="100" Stroke="#6600FF00" Canvas.Left="100" Canvas.Top="100" Fill="#4400FF00">

               <Rectangle.RenderTransform>

                       <RotateTransform Angle="30.0" CenterX="0.0" CenterY="0.0"/>

               </Rectangle.RenderTransform>

        </Rectangle>

        <!-- RotateTransform 테스트를 위한 샘플 2  -->

        <Rectangle Width="100" Height="100" Stroke="#990000FF" Canvas.Left="100" Canvas.Top="100" Fill="#660000FF">

               <Rectangle.RenderTransform>

                       <RotateTransform Angle="60.0" CenterX="0.0" CenterY="0.0"/>

               </Rectangle.RenderTransform>

        </Rectangle>

        <!-- RotateTransform 테스트를 위한 샘플 3  -->

        <Rectangle Width="100" Height="100" Stroke="#CC000000" Canvas.Left="100" Canvas.Top="100" Fill="#88000000">

               <Rectangle.RenderTransform>

                       <RotateTransform Angle="90.0" CenterX="0.0" CenterY="0.0"/>

               </Rectangle.RenderTransform>

        </Rectangle>

</Canvas>

 

원점을 중심으로 30도, 60도, 90도 형태로 변형됨을 알 수가 있다. 당연히 Angle의 값을 (-)로 입력을 하면 반대 방향으로 변환이 된다. 즉, 원점을 중심으로 위쪽으로 이동이 된다. 회전에서도 원점의 역할은 상당히 중요하다. 하지만 원리는 SkewTransform과 같은 원리를 이용하기 때문에 SkewTransform에서의 원점의 원리만 파악하고 있다면 그다지 어려운 부분은 없을 것이다.

아래의 그림은 원점이 (0,0) 일 때와 원점이 (30, 30)일 때의 변환된 모습을 보여준다.

        

 

 

이제 마지막으로 하나만 남았다. MatrixTransform이다. 이 녀석은 다음에 마지막으로 좀 더 세부적으로 다루어 볼까 한다. 아마도 수학적인 부분이 많이 들어가야 조금이라도 쉽게 이해가 될 것 같아서 이다.

 

참고도서 : Essential SilverLight (O'REILLY), SilverLight 1.0 - Development with JavaScript.chm