注:本文由BeyondVincent(破船)原创首发
转载请注明出处:BeyondVincent(破船)@DevDiv.com
更多内容请查看下面的帖子
[DevDiv原创]Windows 8 开发Step by Step
小引
在程序的开发过程中,变换是一个常用的操作,比如图片的缩放、旋转、移动等,都涉及到变换。在接下来的几篇文章中,我将对变换进行详细的介绍,欢迎你的阅读。
变换简介
变换在数学上的定义是这样的:
非空集合A到自身的一个映射f:A→A称为集合A的变换。
变换是基于一个数学公式:从一个Point到新的一个Point。如果将某个对象所有的Point都应用到这个公式上,就可以达到移动、缩放、旋转等效果。
在Windows Runtime中,UIElement定义了三个属性来支持变换:
- RenderTransform——位置变换信息
- RenderTransformOrigin——RenderTransform变换的原点信息
- Projection——投影效果(三维效果)
这些属性是定义在UIElement上的,可知,所有的Element都可以进行变换,例如:Image、TextBlock和Button。如果在Panel的子类(如Grid)上进行变换,那么这个子类所有的children都会同时被变换。
变换类型
在Windows Runtime中,变换类型有如下:
- 仿射变换——RenderTransform
- 非仿射变换——Projection
仿射变换
仿射变换的继承关系,如下图所示:
![](https://img-my.csdn.net/uploads/201211/17/1353140436_6839.jpg)
从图中我们可以看到,仿射变换有7种类型(粉色部分),平移、缩放、旋转等,在后续的文章中,我会详细介绍如何使用它们。
粉色部分的排列顺序是按照数学公式复杂度排列的,TranslateTransform最简单,TransformGroup最复杂。
这7个类定义了二维仿射变换,对象变换之后,直线依旧是直线,平行关系也不会发生改变。只不过位置、大小、方向发生改变而已。
前面已经说了RenderTransform是UIElement的属性,它的类型是Transform。所以可以把这7种类型赋值给RenderTransform。
非仿射变换——Projection
非仿射变换的继承关系,如下图所示:
![](https://img-my.csdn.net/uploads/201211/17/1353141232_1379.jpg)
非仿射变换主要用于三维视觉,在使用的时候,只需要将PlaneProjection或Matrix3DProjection赋值给UIElement的属性Projection即可。
注:在三维空间中,旋转总是基于某个轴(xyz)进行的。
很明显:在这种情况下,对象的平行关系是会改变的。
Projection变换也经常称为模拟3D变换,比如Flip(翻转)。
在后续的文章中,我会对Projection进行详细介绍。
变换演示
下面我写了个小示例,来演示一下仿射变换和非仿射变换的效果。
左边是原始效果,中间是以正中心为原点,旋转45度,右边是翻转45度
![](https://img-my.csdn.net/uploads/201211/17/1353143403_2427.jpg)
最后附上代码,方便大家自行演示效果
<Page
x:Class="BV_Transform_Introduction.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BV_Transform_Introduction"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="原始效果" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Center" FontSize="50" Margin="128,76,127,632"></TextBlock>
<Image Grid.Column="0" Grid.Row="0" Source="1.jpg" ></Image>
<TextBlock Text="旋转效果" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" FontSize="50" Margin="128,76,127,632"></TextBlock>
<Image Grid.Column="1" Grid.Row="0" Source="1.jpg" >
<Image.RenderTransformOrigin>0.5 0.5</Image.RenderTransformOrigin>
<Image.RenderTransform>
<RotateTransform Angle="45"/>
</Image.RenderTransform>
</Image>
<TextBlock Text="翻转效果" Grid.Column="2" Grid.Row="0" HorizontalAlignment="Center" FontSize="50" Margin="128,76,127,632"></TextBlock>
<Image Grid.Column="2" Grid.Row="0" Source="1.jpg" >
<Image.Projection>
<PlaneProjection RotationY="60"/>
</Image.Projection>
</Image>
</Grid>
</Page>