本文详细介绍了WPF中的RenderTransform，包括ScaleTransform（缩放）、SkewTransform（扭曲）、TranslateTransform（平移）、MatrixTransform（矩阵变换）、TransformGroup（组合变换）和RotateTransform（旋转）的使用方法，通过XAML代码实例展示了如何实现对象的各种变形效果。
在wpf中RenderTransform（变形）是对一个影像或一张图片或一个对象的缩放、旋转以及位移等特效变形。
用官方的说法就是：WPF中的变形（RenderTransform）类是为了达到直接去改变某个Silverlight对象的形状（比 如缩放、旋转一个元素）的目的而设计的，RenderTransform包含的变形属性成员就是专门 用来改变Silverlight对象形状的，它可以实现对元素拉伸，旋转，扭曲等效果，同时变形特 效也常用于辅助产生各种动画效果。
RenderTransform类中包含了以下成员也就是变形的元素（平移变形、旋转变形、缩放变形、扭曲变形、矩阵变形和组合变形元素）：
- ScaleTransform：能够让某对象产生缩放变化。
- SkewTransform：能够让某对象产生扭曲变化。
- TranslateTransform：能够让某对象的位置发生平移变化
- MatrixTransform：能够让某对象通过矩阵算法实现更为复杂的变形。
- TransformGroup：能够让某对象的缩放、旋转、扭曲等变化效果合并起来使用。
- RotateTransform：能够让某对象产生旋转变化，根据中心点进行顺时针旋转或逆时针旋转。
变形特效常用于在不改变对象本身构成的情况下，使对象产生变形效果，所以变形元素常辅助产生Silverlight中放入各种动画效果。
通常情况下，，对于MediaElement元素使用RenderTransform属性比使用LayoutTransform属性更好，因为RenderTransform属性是 轻量级的。而且它还可以使用方便的RenderTransformOrigin属性值，从而可以为特定的变换（如旋转）使用相对坐标。
首先依次演示一下，先说明效果图都是被缩小的；
一、ScaleTransform（缩放变化）
在 二维 x-y 坐标系内缩放对象。
XAML
<UserControl x:Class="WpfNorth.View.BasicData.COUOTp"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:gif="http://wpfanimatedgif.codeplex.com"
xmlns:local="clr-namespace:WpfNorth.View.BasicData"
mc:Ignorable="d"
d:DesignHeight="768" d:DesignWidth="1366">
<Canvas>
<Image Canvas.Top="160" Canvas.Left="140" Source="图片路径 "
Opacity="0.5"></Image>
<Image Canvas.Top="160" Canvas.Left="140" Source="图片路劲">
<Image.RenderTransform>
<ScaleTransform ScaleX="0.5" ScaleY="0.5">
</ScaleTransform>
</Image.RenderTransform>
</Image>
</Canvas>
</UserControl>
其中
CenterX：获取或设置此 System.Windows.Media.ScaleTransform 的中心点的 x 坐标。
CenterY：获取或设置此 System.Windows.Media.ScaleTransform 的中心点的 y 坐标。
ScaleX：获取或设置 x 轴的缩放比例。
ScaleY：获取或设置 y 轴的缩放比例。
Value：获取 System.Windows.Media.Matrix 对象形式的当前缩放转换。
效果：
二、SkewTransform（扭曲变化）
表示一种二维扭曲
XAML
<UserControl x:Class="WpfNorth.View.BasicData.COUOTp"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:gif="http://wpfanimatedgif.codeplex.com"
xmlns:local="clr-namespace:WpfNorth.View.BasicData"
mc:Ignorable="d"
d:DesignHeight="768" d:DesignWidth="1366">
<Canvas>
<Image Canvas.Top="160" Canvas.Left="140" Source=" 图片路径"
Opacity="0.5"></Image>
<Image Canvas.Top="160" Canvas.Left="140" Source=" 图片路径">
<Image.RenderTransform>
<SkewTransform AngleX="30" AngleY="10">
</SkewTransform>
</Image.RenderTransform>
</Image>
</Canvas>
</UserControl>
AngleX：获取或设置 x 轴扭曲角度，该角度从 y 轴开始沿逆时针方向测量，以度为单位。
AngleY：获取或设置 y 轴扭曲角度，该角度从 x 轴开始沿逆时针方向测量，以度为单位。
CenterX：获取或设置变换中心的 x 坐标。
CneterY：获取或设置变换中心的 y 坐标。
Value：以 System.Windows.Media.Matrix 形式获取当前的变换值。
效果
- TranslateTransform(平移变化)：
在 二维 x-y 坐标系中平移（移动）对象。
XAML
<UserControl x:Class="WpfNorth.View.BasicData.COUOTp"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:gif="http://wpfanimatedgif.codeplex.com"
xmlns:local="clr-namespace:WpfNorth.View.BasicData"
mc:Ignorable="d"
d:DesignHeight="768" d:DesignWidth="1366">
<Canvas>
<!--定义两张图片-->
<Image Canvas.Top="160" Canvas.Left="140" Source="图片路径"
Opacity="0.5"></Image>
<Image Canvas.Top="160" Canvas.Left="140" Source="图片路径">
<!--平移变化-->
<Image.RenderTransform>
<TranslateTransform X="120" Y="120">
</TranslateTransform>
</Image.RenderTransform>
</Image>
</Canvas>
</UserControl>
效果：
- MatrixTransform （矩阵变换）
创建一个任意仿射矩阵变换，用于操作二维平面中的对象或坐标系。
MatriX：获取或设置定义此变换的 System.Windows.Media.Matrix 结构。
Value：获取表示此 System.Windows.Media.MatrixTransform 的 System.Windows.Media.MatrixTransform.Matrix。
五、TransformGroup
表示由其他对象组成的复合。缩放、旋转、扭曲等变化效果合并起来
六、RotateTransform（旋转变化）：
在 二维 x-y 坐标系内围绕指定点按照顺时针方向旋转对象。
XAML
<UserControl x:Class="WpfNorth.View.BasicData.COUOTp"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:gif="http://wpfanimatedgif.codeplex.com"
xmlns:local="clr-namespace:WpfNorth.View.BasicData"
mc:Ignorable="d"
d:DesignHeight="768" d:DesignWidth="1366">
<Canvas>
<Image Canvas.Top="160" Canvas.Left="140" Source="图片路径 "
Opacity="0.5"></Image>
<Image Canvas.Top="160" Canvas.Left="140" Source="图片路径 ">
<Image.RenderTransform>
<RotateTransform Angle="45" CenterX="0" CenterY="0">
</RotateTransform>
</Image.RenderTransform>
</Image>
</Canvas>
</UserControl>
Angle：获取或设置顺时针旋转角度（以度为单位）。
CenterX：获取或设置旋转中心点的 x 坐标。
CenterY：获取或设置旋转中心点的 y 坐标。
Value：以 System.Windows.Media.Matrix 对象的形式获取当前的旋转变换。
效果：
恩，貌似越界了。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
