방법: 요소 기울이기

  • 아티클

이 예제는 SkewTransform을 사용하여 요소를 기울이는 방법을 보여 줍니다. 전단이라고도 하는 기울이기는 일관되지 않은 방식으로 좌표 공간을 늘리는 변환입니다. SkewTransform의 일반적 용도 중 하나는 2D 개체에서 3D 깊이를 시뮬레이트하는 것입니다.

CenterX 및 CenterY 속성을 사용하여 SkewTransform의 중심점을 지정합니다.

AngleX 및 AngleY 속성을 사용하여 x축과 y축의 기울이기 각도를 지정하고 이 축을 따라 현재 좌표계를 기울입니다.

기울이기 변형 효과를 예측하려면 AngleX는 원래 좌표계를 기준으로 x축 값을 기울인다는 점을 고려하세요. 따라서 AngleX가 30이면 y축은 원점을 기준으로 30도 회전하고 x축의 값을 해당 원점에서 30도만큼 기울입니다. 마찬가지로 AngleY가 30이면 도형의 y축 값을 원점에서 30도만큼 기울입니다. 이것은 좌표 시스템을 x 또는 y축으로 30도만큼 변환(이동)하는 것과 같지 않습니다.

다음 예제는 (0,0)의 중심점에서 Rectangle에 45도의 가로 기울이기를 적용합니다.

예제

<Rectangle 
  Height="50" Width="50" Fill="#CCCCCCFF" 
  Stroke="Blue" StrokeThickness="2"
  Canvas.Left="100" Canvas.Top="100">
  <Rectangle.RenderTransform>

     <!-- Applies a horizontal skew of 45 degrees 
          from a center point of (0,0). -->             
    <SkewTransform CenterX="0" CenterY="0" AngleX="45" AngleY="0" />
  </Rectangle.RenderTransform>
</Rectangle>

다음 예제는 (25,25)의 중심점에서 Rectangle에 45도의 가로 기울이기를 적용합니다.

<Rectangle Height="50" Width="50" Fill="#CCCCCCFF"
  Canvas.Left="100" Canvas.Top="100" 
  Stroke="Blue" StrokeThickness="2">
  <Rectangle.RenderTransform>
  
     <!-- Applies a horizontal skew of 45 degrees 
          from a center point of (25,25). -->  
    <SkewTransform CenterX="25" CenterY="25" AngleX="45" AngleY="0" />
  </Rectangle.RenderTransform>
</Rectangle>

다음 예제는 (25,25)의 중심점에서 Rectangle에 45도의 세로 기울이기를 적용합니다.

<Rectangle Height="50" Width="50" Fill="#CCCCCCFF" 
  Stroke="Blue" StrokeThickness="2"
  Canvas.Left="100" Canvas.Top="100">
  <Rectangle.RenderTransform>
  
     <!-- Applies a vertical skew of 45 degrees 
          from a center point of (25,25). -->             
    <SkewTransform CenterX="25" CenterY="25" AngleX="0" AngleY="45" />
  </Rectangle.RenderTransform>
</Rectangle>

다음 그림에서는 이 예제에서 사용되는 다양한 기울이기를 보여 줍니다.

SkewTransform 예제
세 개의 SkewTransform 예제 그림

전체 샘플을 보려면 2차원 변형 샘플을 참조하세요.

참고 항목