방법: 요소 배율 조정
업데이트: 2007년 11월
이 예제에서는 ScaleTransform을 사용하여 요소의 배율을 조정하는 방법을 보여 줍니다.
ScaleX 및 ScaleY 속성을 사용하여 지정한 배율로 요소의 크기를 조정할 수 있습니다. 예를 들어 ScaleX 값으로 1.5를 지정하면 요소 너비가 원래 너비의 150%로 늘려지고, ScaleY 값으로 0.5를 지정하면 요소 높이가 50%까지 줄어듭니다.
CenterX 및 CenterY 속성을 사용하여 배율 조정 작업의 중점을 지정할 수 있습니다. 기본적으로 ScaleTransform의 중점은 사각형의 왼쪽 위 모퉁이에 해당하는 지점(0,0)입니다. 이는 요소를 이동하고 더 크게 보이도록 만드는 효과를 내는데, Transform을 적용할 때는 개체가 위치한 좌표 공간이 변경되기 때문입니다.
다음 예제에서는 ScaleTransform을 사용하여 가로와 세로가 각각 50인 Rectangle의 크기를 두 배로 늘립니다. ScaleTransform의 CenterX 및 CenterY 값은 모두 0(기본값)입니다.
예제
<!-- Scales a rectangle by 200% from a center of (0,0).-->
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF"
Stroke="Blue" StrokeThickness="2"
Canvas.Left="100" Canvas.Top="100">
<Rectangle.RenderTransform>
<ScaleTransform CenterX="0" CenterY="0" ScaleX="2" ScaleY="2" />
</Rectangle.RenderTransform>
</Rectangle>
일반적으로 CenterX 및 CenterY는 배율을 조정하는 개체의 중점(Width/2, Height/2)으로 설정합니다.
다음 예제에서는 크기가 두 배인 다른 Rectangle을 보여 줍니다. 하지만 이 ScaleTransform의 CenterX 및 CenterY 값은 모두 25이며 이는 사각형의 중점에 해당합니다.
<!-- Scales a rectangle by 200% from a center of (25,25).-->
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF"
Canvas.Left="100" Canvas.Top="100" Stroke="Blue" StrokeThickness="2">
<Rectangle.RenderTransform>
<ScaleTransform CenterX="25" CenterY="25" ScaleX="2" ScaleY="2" />
</Rectangle.RenderTransform>
</Rectangle>
다음 그림에서는 두 ScaleTransform 작업의 차이점을 보여 줍니다. 점선은 배율 조정 전의 사각형의 크기와 위치를 보여 줍니다.
ScaleX 및 ScaleY 값이 같지만 중점은 다른 두 ScaleTransform 작업
.gif)
전체 샘플을 보려면 2차원 변환 샘플을 참조하십시오.