Cómo: Sesgar un elemento

En este ejemplo se muestra cómo usar un objeto SkewTransform para sesgar un elemento. Un sesgo, que también se conoce como distorsión, es una transformación que expande el espacio de coordenadas de una manera no uniforme. SkewTransform suele usarse para simular una profundidad 3-D en objetos 2-D.

Use las propiedades CenterX y CenterY para especificar el punto central de SkewTransform.

Use las propiedades AngleX y AngleY para especificar el ángulo de sesgo del eje X e Y, así como para sesgar el sistema de coordenadas actual a lo largo de estos ejes.

Para predecir el efecto de una transformación de sesgo, piense que AngleX sesga los valores del eje X respecto al sistema de coordenadas original. Por consiguiente, para obtener un AngleX de 30, el eje Y gira 30 grados a través del origen y sesga los valores en X- 30 grados a partir de ese origen. Igualmente, un AngleY de 30 sesga los valores de Y- de la forma 30 grados desde el origen. Observe que no se trata del mismo efecto que trasladar (mover) el sistema de coordenadas 30 grados en X- o Y-.

En el ejemplo siguiente se aplica un sesgo horizontal de 45 grados a un objeto Rectangle desde un punto central de (0,0).

Ejemplo

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

En el ejemplo siguiente se aplica un sesgo horizontal de 45 grados a un objeto Rectangle desde un punto central de (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>

En el ejemplo siguiente se aplica un sesgo vertical de 45 grados a un objeto Rectangle desde un punto central de (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 ilustración siguiente muestra los diferentes sesgos que se usan en este ejemplo.

Ilustración de los tres ejemplos de SkewTransform

Ejemplos de SkewTransform

Para obtener el ejemplo completo, vea 2-D Transforms Sample.

Vea también

Referencia

Transform

SkewTransform

Conceptos

Información general sobre transformaciones

Otros recursos

Temas "Cómo..." de transformaciones