방법: 개체 회전

  • 아티클

이 예제에서는 개체를 회전하는 방법을 보여 줍니다. 예제는 먼저 RotateTransform을 만든 다음 Angle을 도 단위로 지정합니다.

다음 예제는 Polyline 개체를 왼쪽 위 모서리를 기준으로 45도만큼 회전합니다.

예제

<Canvas Height="200" Width="200">

  <!-- Rotates the Polyline 45 degrees about the point (0,0). -->
  <Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" 
    Stroke="Blue" StrokeThickness="10"
    Canvas.Left="75" Canvas.Top="50">
    <Polyline.RenderTransform>
      <RotateTransform CenterX="0" CenterY="0" Angle="45" />
    </Polyline.RenderTransform>
  </Polyline>
</Canvas>

// Create a Polyline.
Polyline polyline1 = new Polyline();
polyline1.Points.Add(new Point(25, 25));
polyline1.Points.Add(new Point(0, 50));
polyline1.Points.Add(new Point(25, 75));
polyline1.Points.Add(new Point(50, 50));
polyline1.Points.Add(new Point(25, 25));
polyline1.Points.Add(new Point(25, 0));
polyline1.Stroke = Brushes.Blue;
polyline1.StrokeThickness = 10;

// Create a RotateTransform to rotate
// the Polyline 45 degrees about its
// top-left corner.
RotateTransform rotateTransform1 =
    new RotateTransform(45);
polyline1.RenderTransform = rotateTransform1;

// Create a Canvas to contain the Polyline.
Canvas canvas1 = new Canvas();
canvas1.Width = 200;
canvas1.Height = 200;
Canvas.SetLeft(polyline1, 75);
Canvas.SetTop(polyline1, 50);
canvas1.Children.Add(polyline1);

' Create a Polyline.
Dim polyline1 As New Polyline()
polyline1.Points.Add(New Point(25, 25))
polyline1.Points.Add(New Point(0, 50))
polyline1.Points.Add(New Point(25, 75))
polyline1.Points.Add(New Point(50, 50))
polyline1.Points.Add(New Point(25, 25))
polyline1.Points.Add(New Point(25, 0))
polyline1.Stroke = Brushes.Blue
polyline1.StrokeThickness = 10

' Create a RotateTransform to rotate
' the Polyline 45 degrees about its
' top-left corner.
Dim rotateTransform1 As New RotateTransform(45)
polyline1.RenderTransform = rotateTransform1

' Create a Canvas to contain the Polyline.
Dim canvas1 As New Canvas()
canvas1.Width = 200
canvas1.Height = 200
Canvas.SetLeft(polyline1, 75)
Canvas.SetTop(polyline1, 50)
canvas1.Children.Add(polyline1)

RotateTransform의 CenterX 및 CenterY 속성은 개체가 회전하는 중심점을 지정합니다. 이 중심점은 변환되는 요소의 좌표 공간으로 표현됩니다. 기본적으로 회전은 변환할 개체의 왼쪽 위 구석에 해당하는 (0,0)에 적용됩니다.

그 다음 예제는 Polyline 개체를 점(25,50)을 기준으로 시계 방향으로 45도만큼 회전합니다.

<Canvas Height="200" Width="200">

  <!-- Rotates the Polyline 45 degrees about the point (25,50). -->
  <Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" 
    Stroke="Blue" StrokeThickness="10"
    Canvas.Left="75" Canvas.Top="50">
    <Polyline.RenderTransform>
      <RotateTransform CenterX="25" CenterY="50" Angle="45" />
    </Polyline.RenderTransform>
  </Polyline>
</Canvas>

// Create a Polyline.
Polyline polyline2 = new Polyline();
polyline2.Points = polyline1.Points;
polyline2.Stroke = Brushes.Blue;
polyline2.StrokeThickness = 10;

// Create a RotateTransform to rotate
// the Polyline 45 degrees about the
// point (25,50).
RotateTransform rotateTransform2 =
    new RotateTransform(45);
rotateTransform2.CenterX = 25;
rotateTransform2.CenterY = 50;
polyline2.RenderTransform = rotateTransform2;

// Create a Canvas to contain the Polyline.
Canvas canvas2 = new Canvas();
canvas2.Width = 200;
canvas2.Height = 200;
Canvas.SetLeft(polyline2, 75);
Canvas.SetTop(polyline2, 50);
canvas2.Children.Add(polyline2);

' Create a Polyline.
Dim polyline2 As New Polyline()
polyline2.Points = polyline1.Points
polyline2.Stroke = Brushes.Blue
polyline2.StrokeThickness = 10

' Create a RotateTransform to rotate
' the Polyline 45 degrees about the
' point (25,50).
Dim rotateTransform2 As New RotateTransform(45)
rotateTransform2.CenterX = 25
rotateTransform2.CenterY = 50
polyline2.RenderTransform = rotateTransform2

' Create a Canvas to contain the Polyline.
Dim canvas2 As New Canvas()
canvas2.Width = 200
canvas2.Height = 200
Canvas.SetLeft(polyline2, 75)
Canvas.SetTop(polyline2, 50)
canvas2.Children.Add(polyline2)

다음 그림은 Transform을 두 개체에 적용한 결과를 보여 줍니다.

여러 중심점을 사용한 45도 회전
서로 다른 회전 중심에서 45도로 회전하는 두 개체

이전 예제의 Polyline은 UIElement입니다. Transform을 UIElement의 RenderTransform 속성에 적용하면 RenderTransformOrigin 속성을 사용하여 요소에 적용하는 모든 Transform에 원점을 지정할 수 있습니다. RenderTransformOrigin 속성은 상대 좌표를 사용하므로 크기를 모르더라도 요소의 중심에 변형을 적용할 수 있습니다. 자세한 내용 및 예제를 보려면 상대 값을 사용하여 변형 원점 지정을 참조하세요.

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

참고 항목