Comment : faire pivoter un objet
Mise à jour : novembre 2007
Cet exemple montre comment faire pivoter un objet. L'exemple crée d'abord un RotateTransform, puis spécifie son Angle en degrés.
L'exemple suivant fait pivoter un objet Polyline à 45 degrés par rapport à son angle supérieur gauche.
Exemple
<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);
Les propriétés CenterX et CenterY du RotateTransform spécifient le point par rapport auquel l'objet pivote. Ce point central est exprimé dans l'espace de coordonnées de l'élément qui est transformé. Par défaut, la rotation est appliquée à (0,0), qui est l'angle supérieur gauche de l'objet à transformer.
L'exemple suivant fait pivoter un objet Polyline dans le sens des aiguilles d'une montre à 45 degrés par rapport au point (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);
L'illustration suivante montre les résultats de l'application d'un Transform aux deux objets.
Deux objets qui pivotent à 45 degrés à partir de centres de rotation différents
.gif)
La Polyline des exemples précédents est un UIElement. Lorsque vous appliquez un Transform à la propriété RenderTransform d'un UIElement, vous pouvez utiliser la propriété RenderTransformOrigin pour spécifier une origine pour chaque Transform que vous appliquez à l'élément. Étant donné que la propriété RenderTransformOrigin utilise des coordonnées relatives, vous pouvez appliquer une transformation au centre de l'élément même si vous ne connaissez pas sa taille. Pour plus d'informations et pour obtenir un exemple, consultez Comment : spécifier l'origine d'une transformation à l'aide de valeurs relatives.
Pour l'exemple complet, consultez Transformations 2D, exemple.
Voir aussi
Concepts
Vue d'ensemble des transformations