共用方式為


HOW TO:傾斜項目

本範例說明如何使用 SkewTransform 傾斜項目。 傾斜也稱為切變,這種轉換會以非一致的方式延伸座標空間。 SkewTransform 的常見使用方式就是在 2-D 物件中模擬3-D深度。

使用 CenterXCenterY 屬性指定 SkewTransform 的中心點。

使用 AngleXAngleY 屬性指定 X 軸和 Y 軸的傾斜角度,將目前的座標系統沿著這些軸傾斜。

若要預測傾斜轉換的效果,可以將 AngleX 想成是相對於原始座標系統傾斜 X 軸值。 因此,若 AngleX 為 30,Y 軸會穿過原點旋轉 30 度,然後從該原點傾斜 X 軸的值 30 度。 同樣地,若 AngleY 為 30,會將圖案的 Y 軸值從原點開始傾斜 30 度。 請注意,這與轉移 (移動) 座標系統的 X 軸或 Y 軸 30 度的效果不同。

下列範例會將 45 度的水平傾斜套用到 Rectangle,從中心點 (0,0) 開始。

範例

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

下列範例會將 45 度的水平傾斜套用到 Rectangle,從中心點 (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>

下列範例會將 45 度的垂直傾斜套用到 Rectangle,從中心點 (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> 

下圖顯示本範例所使用的不同傾斜。

三個 SkewTransform 範例示意圖

SkewTransform 範例

如需完整範例,請參閱 2D 轉換範例 (英文)。

請參閱

參考

Transform

SkewTransform

概念

轉換概觀

其他資源

轉換 HOW TO 主題