Udostępnij za pośrednictwem

Jak przechylić element

  • Artykuł

W tym przykładzie pokazano, jak przez SkewTransform skośnić element. Skośność, która jest również znana jako ścinanie, to transformacja, która rozciąga przestrzeń współrzędnych w sposób niejednorodny. Jednym z typowych zastosowań SkewTransform jest symulowanie głębokości 3D w obiektach 2D.

Użyj właściwości CenterX i CenterY, aby określić punkt środkowy SkewTransform.

Użyj właściwości AngleX i AngleY, aby określić kąt niesymetryczności osi x i osi y oraz wypaczyć bieżący układ współrzędnych wzdłuż tych osi.

Aby przewidzieć efekt przekształcenia skośnego, należy wziąć pod uwagę, że AngleX zniekształca wartości na osi x względem oryginalnego układu współrzędnych. W związku z tym dla AngleX wynoszącego 30 oś y obraca się o 30 stopni w punkcie początkowym i przesuwa wartości na osi x o 30 stopni od tego punktu. Podobnie, AngleY o 30 stopni przekrzywia wartości y kształtu o 30 stopni od początku. Należy pamiętać, że nie jest to taki sam efekt jak przekształcenie (przesuwanie) układu współrzędnych o 30 stopni wzdłuż osi x lub y.

Poniższy przykład aplikuje poziome pochylenie o 45 stopni do Rectangle z punktu środkowego (0,0).

Przykład

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

Poniższy przykład stosuje poziome przesunięcie o 45 stopni do Rectangle z punktu środkowego (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>

Poniższy przykład stosuje pionowe pochylanie o 45 stopni do Rectangle od punktu środkowego (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>

Na poniższej ilustracji przedstawiono różne niesymetryczności używane w tym przykładzie.

Przykłady SkewTransform
Trzy przykłady SkewTransform ilustrowane

Aby uzyskać kompletny przykład, zobacz Przykład Przekształceń 2D.

Zobacz też