Compartilhar via


Como: Inclinar um elemento

Este exemplo mostra como usar um SkewTransform para inclinar um elemento. Um skew,que também é conhecido como um Shear, é uma transformação que estende o espaço de coordenadas de maneira não uniforme. Um uso típico de uma SkewTransform é para simular profundidade 3-D em objetos 2-D.

Use as propriedades CenterX e CenterY para especificar o ponto central da SkewTransform.

Use as propriedades AngleX e AngleY para especificar o ângulo de inclinação dos eixos x e y, e para inclinar o sistema de coordenadas atual ao longo desses eixos.

Para prever o efeito de uma transformação skew, considere que AngleX inclina valores do eixo x relativo ao sistema de coordenadas original. Portanto, para um AngleX de 30, o eixo y gira 30 graus pela origem e inclina os valores de x em 30 graus a partir dessa origem. Da mesma forma, um AngleY de 30 inclina os valores de y da shape em 30 graus a partir da origem. Observe que isso é não o mesmo efeito que transladar (mover) o sistema de coordenadas por 30 graus no x ou y.

O exemplo seguinte aplica uma skew horizontal de 45 graus para um Rectangle de um ponto central em (0,0).

Exemplo

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

O exemplo seguinte aplica uma skew horizontal de 45 graus para um Rectangle de um ponto central em (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>

O exemplo seguinte aplica uma skew horizontal de 45 graus para um Rectangle de um ponto central em (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> 

A ilustração a seguir mostra as diferentes skews que são usadas no exemplo.

Os três exemplos SkewTransform ilustrados

Exemplos de SkewTransform

For the complete sample, see Exemplo de transformações 2-D.

Consulte também

Conceitos

Visão Geral sobre Transformações

Referência

Transform

SkewTransform

Outros recursos

Transformations How-to Topics