Hoe een object draaien

In dit voorbeeld ziet u hoe u een object kunt draaien. In het voorbeeld wordt eerst een RotateTransform gemaakt en vervolgens de Angle in graden opgegeven.

In het volgende voorbeeld wordt een Polyline-object 45 graden gedraaid rondom de linkerbovenhoek.

Voorbeeld

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

De eigenschappen CenterX en CenterY van de RotateTransform het punt opgeven waarover het object wordt gedraaid. Dit middelpunt wordt uitgedrukt in de coördinaatruimte van het element dat wordt getransformeerd. De draaiing wordt standaard toegepast op (0,0), de linkerbovenhoek van het object dat moet worden getransformeerd.

In het volgende voorbeeld wordt een Polyline-object met de klok mee 45 graden om het punt (25,50) gedraaid.

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

In de volgende afbeelding ziet u de resultaten van het toepassen van een Transform op de twee objecten.

Twee objecten die 45 graden draaien vanuit verschillende draaipunten

De Polyline in de vorige voorbeelden is een UIElement. Wanneer u een Transform toepast op de eigenschap RenderTransform van een UIElement, kunt u de eigenschap RenderTransformOrigin gebruiken om een oorsprong op te geven voor elke Transform die u op het element toepast. Omdat de eigenschap RenderTransformOrigin relatieve coördinaten gebruikt, kunt u een transformatie toepassen op het midden van het element, zelfs als u de grootte ervan niet weet. Zie De oorsprong van een transformatie opgeven met behulp van relatieve waardenvoor meer informatie en voor een voorbeeld.

Zie 2D Transforms Samplevoor het volledige voorbeeld.

Zie ook

• Transform
• Overzicht van transformaties
• Handleidingonderwerpen