如何:使元素扭曲

更新:2007 年 11 月

本示例演示如何使用 SkewTransform 扭曲元素。扭曲(也称为修剪)是一种以非均匀方式拉伸坐标空间的变换。SkewTransform 的一个典型用法是在 二维 对象中模拟 三维 深度。

使用 CenterXCenterY 属性可指定 SkewTransform 的中心点。

使用 AngleXAngleY 属性可指定 x 轴和 y 轴的扭曲角度,使当前坐标系沿着这些轴扭曲。

若要预测扭曲变换的效果,请考虑 AngleX 相对于原始坐标系扭曲 x 轴的值。因此,如果 AngleX 为 30,则 y 轴绕原点旋转 30 度,将 x 轴的值从该原点扭曲 30 度。同样,如果 AngleY 为 30,则会将该形状的 y 轴值从原点扭曲 30 度。请注意,在 x 或 y 轴中将坐标系变换(移动)30 度的效果不相同。

下面的示例向 Rectangle 应用自中心点 (0,0) 的 45 度水平扭曲。

示例

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

下面的示例向 Rectangle 应用自中心点 (25,25) 的 45 度水平扭曲。

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

下面的示例向 Rectangle 应用自中心点 (25,25) 的 45 度垂直扭曲。

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

有关完整示例,请参见 二维转换示例

请参见

概念

变换概述

参考

Transform

SkewTransform

其他资源

变换帮助主题