Freigeben über

Gewusst wie: Neigen eines Elements

  • Artikel

Dieses Beispiel zeigt, wie Sie mit SkewTransform ein Element schräg stellen können. Eine Neigung ist eine Transformation, die den Koordinatenraum auf ungleichmäßige Art ausdehnt. Eine typische Anwendung von SkewTransform ist die Simulation von 3D-Tiefe in 2D-Objekten.

Verwenden Sie die CenterX- und CenterY-Eigenschaften, um den Mittelpunkt des SkewTransform anzugeben.

Verwenden Sie die Eigenschaften AngleX und AngleY, um den Neigungswinkel der x-Achse und der y-Achse anzugeben und das aktuelle Koordinatensystem entlang dieser Achsen zu neigen.

Um die Auswirkungen einer schiefen Transformation vorherzusagen, betrachten Sie, dass AngleX die Werte der x-Achse relativ zum ursprünglichen Koordinatensystem neigt. Daher rotiert bei einem AngleX von 30 die Y-Achse um 30° durch den Ursprung und neigt die Werte auf der X-Achse um 30° vom Ursprung. Ebenso werden bei einem AngleY von 30 die y-Werte der Form um 30 Grad gegenüber dem Ursprung verdreht. Beachten Sie, dass dieser Vorgang nicht dieselbe Wirkung erzielt, wie das Übersetzen (Bewegen) des Koordinatensystems um 30° in der X- oder Y-Achse.

Im folgenden Beispiel wird aus einem Mittelpunkt (0,0) eine horizontale Neigung von 45° auf ein Rectangle angewendet.

Beispiel

<Rectangle 
  Height="50" Width="50" Fill="#CCCCCCFF" 
  Stroke="Blue" StrokeThickness="2"
  Canvas.Left="100" Canvas.Top="100">
  <Rectangle.RenderTransform>

     <!-- Applies a horizontal skew of 45 degrees 
          from a center point of (0,0). -->             
    <SkewTransform CenterX="0" CenterY="0" AngleX="45" AngleY="0" />
  </Rectangle.RenderTransform>
</Rectangle>

Im folgenden Beispiel wird aus einem Mittelpunkt (25,25) eine horizontale Neigung von 45° auf ein Rectangle angewendet.

<Rectangle Height="50" Width="50" Fill="#CCCCCCFF"
  Canvas.Left="100" Canvas.Top="100" 
  Stroke="Blue" StrokeThickness="2">
  <Rectangle.RenderTransform>
  
     <!-- Applies a horizontal skew of 45 degrees 
          from a center point of (25,25). -->  
    <SkewTransform CenterX="25" CenterY="25" AngleX="45" AngleY="0" />
  </Rectangle.RenderTransform>
</Rectangle>

Im folgenden Beispiel wird aus einem Mittelpunkt (25,25) eine vertikale Neigung von 45° auf ein Rectangle angewendet.

<Rectangle Height="50" Width="50" Fill="#CCCCCCFF" 
  Stroke="Blue" StrokeThickness="2"
  Canvas.Left="100" Canvas.Top="100">
  <Rectangle.RenderTransform>
  
     <!-- Applies a vertical skew of 45 degrees 
          from a center point of (25,25). -->             
    <SkewTransform CenterX="25" CenterY="25" AngleX="0" AngleY="45" />
  </Rectangle.RenderTransform>
</Rectangle>

Die folgenden Abbildungen zeigen die verschiedenen Neigungen, die in diesem Beispiel verwendet werden.

SkewTransform examples
Die drei SkewTransform-Beispiele veranschaulicht

Das vollständige Beispiel finden Sie unter Beispiele für 2D-Transformationen.

Siehe auch