Comment : faire pivoter un objet

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

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

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

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

Référence

Transform

Concepts

Vue d'ensemble des transformations

Autres ressources

Rubriques "Comment" relatives aux transformations