Gewusst wie: Neigen eines Elements

Aktualisiert: November 2007

Dieses Beispiel zeigt, wie eine SkewTransform verwendet wird, um ein Element zu neigen. Eine Neigung ist eine Transformation, die den Koordinatenraum auf ungleichmäßige Art ausdehnt. Eine typische Verwendung einer SkewTransform ist das Simulieren von 3D-Tiefe in 2D-Objekten.

Verwenden Sie die CenterX-Eigenschaft und die CenterY-Eigenschaft, um den Mittelpunkt der SkewTransform anzugeben.

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

Berücksichtigen Sie beim Vorhersagen der Auswirkungen einer Neigungstransformation, dass AngleX die Werte der X-Achse im Verhältnis 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. Entsprechend neigt ein AngleY von 30 die y-Werte der Form um 30° vom Ursprung. 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 folgende Illustration zeigt die verschiedenen Neigungen, die in diesem Beispiel verwendet werden.

Die drei SkewTransform-Beispiele veranschaulicht

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

Siehe auch

Konzepte

Übersicht über Transformationen

Referenz

Transform

SkewTransform

Weitere Ressourcen

Gewusst-wie-Themen zu Transformationen