방법: 요소 기울이기
이 예제에서는 SkewTransform을 사용하여 요소를 기울이는 방법을 보여 줍니다. 개체 기울이기라고도 하는 기울이기는 균일하지 않은 방식으로 좌표 공간을 늘리는 변환입니다. SkewTransform은 일반적으로 2-D 개체에 3-D 깊이를 시뮬레이션하는 데 사용합니다.
CenterX 및 CenterY 속성을 사용하여 SkewTransform의 중점을 지정합니다.
AngleX 및 AngleY 속성을 사용하여 x, y축의 기울기 각도를 지정하여 이 축에 따라 현재 좌표계를 기울입니다.
AngleX는 원래 좌표계를 기준으로 x축의 값을 기울이므로 기울이기 변환의 결과를 예측할 수 있습니다. 따라서 AngleX가 30도이면 y축은 원점을 통과하면서 30도 회전하고 x축 값은 해당 원점을 기준으로 30도 기울어집니다. 마찬가지로, AngleY가 30도이면 도형의 y축 값이 원점을 기준으로 30도 기울어집니다. 좌표계를 x축이나 y축으로 30도 이동하는 경우에는 이와 다른 결과가 발생합니다.
다음 예제에서는 Rectangle을 중점 (0,0)으로부터 가로로 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>
다음 예제에서는 Rectangle을 중점 (25,25)로부터 가로로 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>
다음 예제에서는 Rectangle을 중점 (25,25)로부터 세로로 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의 예
.gif "SkewTransform 예제")
전체 샘플을 보려면 2-D Transforms 샘플을 참조하십시오.