Condividi tramite

Procedura: inclinare un elemento

  • Articolo

In questo esempio viene illustrato come usare un SkewTransform oggetto per asimmetria di un elemento. L'inclinazione, nota anche come distorsione, è una trasformazione che adatta lo spazio delle coordinate in modo non uniforme. Un uso tipico di un SkewTransform è per simulare la profondità 3D in oggetti 2D.

Usare le CenterX proprietà e CenterY per specificare il punto centrale dell'oggetto SkewTransform.

Utilizzare le AngleX proprietà e AngleY per specificare l'angolo di inclinazione dell'asse x e dell'asse y e per asimmetrie del sistema di coordinate corrente lungo questi assi.

Per stimare l'effetto di una trasformazione asimmetria, considerare che AngleX asimmetria i valori dell'asse x rispetto al sistema di coordinate originale. Pertanto, per un oggetto AngleX di 30, l'asse y ruota 30 gradi attraverso l'origine e sfasa i valori in x- di 30 gradi da tale origine. Analogamente, un oggetto AngleY di 30 sfasa i valori y della forma di 30 gradi dall'origine. Si noti che non si tratta dello stesso effetto ottenuto traslando (spostando) il sistema di coordinate di 30 gradi nell'asse x o y.

L'esempio seguente applica un'asimmetria orizzontale di 45 gradi a un Rectangle da un punto centrale di (0,0).

Esempio

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

L'esempio seguente applica un'asimmetria orizzontale di 45 gradi a un Rectangle da un punto centrale di (25,25).

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

L'esempio seguente applica un'asimmetria verticale di 45 gradi a un Rectangle da un punto centrale di (25,25).

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

La figura seguente illustra le diverse inclinazioni usate in questo esempio.

SkewTransform examples
I tre esempi SkewTransform illustrati

Per l'esempio completo, vedere Esempio di trasformazioni 2D.

Vedi anche