Dela via

Gör så här: Skeva ett element

Det här exemplet visar hur du använder en SkewTransform för att förvränga ett element. En skevhet, som även kallas skjuvning, är en transformering som sträcker ut koordinatutrymmet på ett icke-enhetligt sätt. En vanlig användning av en SkewTransform är för att simulera 3D-djup i 2D-objekt.

CenterX Använd egenskaperna och CenterY för att ange mittpunkten för SkewTransform.

AngleX Använd egenskaperna och AngleY för att ange snedställningsvinkeln för x-axeln och y-axeln och för att snedställa det aktuella koordinatsystemet längs dessa axlar.

Om du vill förutsäga effekten av en skev transformering bör du överväga att AngleX skeva x-axelvärden i förhållande till det ursprungliga koordinatsystemet. För en AngleX av 30 roterar y-axeln därför 30 grader genom ursprunget och förvränger värdena i x - med 30 grader från det ursprunget. På samma sätt skevar ett AngleY av 30 y-värdena i formen med 30 grader från ursprunget. Observera att detta inte är samma effekt som att översätta (flytta) koordinatsystemet med 30 grader i x- eller y-.

I följande exempel tillämpas en horisontell skevning på 45 grader på Rectangle från en mittpunkt vid (0,0).

Exempel

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

I följande exempel tillämpas en vågrät snedställning på 45 grader från Rectangle en mittpunkt på (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>

I följande exempel tillämpas en lodrät snedställning på 45 grader från Rectangle en mittpunkt på (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>

Följande bild visar de olika skevheterna som används i det här exemplet.

SkewTransform-exempel
De tre SkewTransform-exemplen som illustreras

Det fullständiga exemplet finns i 2D Transforms Sample.

Se även