Freigeben über

Vorgehensweise: Neigen eines Elements

  • Artikel

Dieses Beispiel zeigt, wie man ein SkewTransform verwendet, um ein Element zu verzerren. Eine Neigung, auch Scherung genannt, ist eine Transformation, die den Koordinatenraum auf ungleichmäßige Art dehnt. Eine typische Verwendung einer SkewTransform ist die Simulation der dreidimensionalen Tiefe bei 2D-Objekten.

Verwenden Sie die CenterX- und CenterY-Eigenschaften, um den Mittelpunkt des SkewTransform-Elements 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 verzerren.

Um die Auswirkungen einer Neigungstransformation vorherzusagen, betrachten Sie, dass AngleX die x-Achsenwerte 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. 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° auf 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 eine vertikale Neigung von 45° auf ein Rectangle-Objekt angewendet, dessen Mittelpunkt sich bei (25,25) befindet.

<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 Abbildung zeigt die verschiedenen Neigungen, die in diesem Beispiel verwendet werden.

SkewTransform-Beispiele
Veranschaulichung der drei SkewTransform-Beispiele

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

Weitere Informationen