Cómo: Girar un objeto

En este ejemplo se muestra cómo girar un objeto. El ejemplo crea primero un objeto RotateTransform y, a continuación, especifica su propiedad Angle en grados.

En el ejemplo siguiente se gira un objeto Polyline 45 grados sobre su esquina superior izquierda.

Ejemplo

<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.
            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)

// 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);

Las propiedades CenterX y CenterY del objeto RotateTransform especifican el punto sobre el que gira el objeto. Este punto central se expresa en el espacio de la coordenada del elemento que se transforma. De forma predeterminada, se aplica la rotación a (0,0) que es la esquina superior izquierda del objeto que se va a transformar.

En el ejemplo siguiente se gira en el sentido de las agujas del reloj un objeto Polyline 45 grados sobre el punto (25,50).

<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.
            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)

// 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);

La ilustración siguiente muestra los resultados de aplicar un objeto Transform a los dos objetos.

Dos objetos que giran 45 grados respecto a diferentes centros de rotación

El objeto Polyline de los ejemplos anteriores es un objeto UIElement. Al aplicar un objeto Transform a la propiedad RenderTransform de un control UIElement, se puede utilizar la propiedad RenderTransformOrigin para especificar un origen para cada objeto Transform que aplique al elemento. Dado que la propiedad RenderTransformOrigin utiliza coordenadas relativas, se puede aplicar una transformación al centro del elemento aunque no se conozca su tamaño. Para obtener más información y un ejemplo, vea Cómo: Especificar el origen de una transformación utilizando valores relativos.

Para obtener el ejemplo completo, vea 2-D Transforms Sample.

Vea también

Referencia

Transform

Conceptos

Información general sobre transformaciones

Otros recursos

Temas "Cómo..." de transformaciones