Cómo: Girar un objeto
Actualización: noviembre 2007
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.
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.
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
.gif "rotaciones de 45 grados con diferentes centros")
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 Ejemplo 2-D Transforms.
Vea también
Conceptos
Información general sobre transformaciones