HOW TO:傾斜項目
更新:2007 年 11 月
本範例說明如何使用 SkewTransform 傾斜項目。傾斜也稱為切變,這種轉換會以非一致的方式延伸座標空間。SkewTransform 的常見使用方式就是在 2D 物件中模擬立體深度。
使用 CenterX 和 CenterY 屬性指定 SkewTransform 的中心點。
使用 AngleX 和 AngleY 屬性指定 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 範例示意圖
如需完整範例,請參閱 2D 轉換範例。