Windows Store apps开发[55]变换(Transform)(1)简介

注：本文由BeyondVincent(破船)原创首发

        转载请注明出处：BeyondVincent(破船)@DevDiv.com

更多内容请查看下面的帖子

[DevDiv原创]Windows 8 开发Step by Step

小引

在程序的开发过程中，变换是一个常用的操作，比如图片的缩放、旋转、移动等，都涉及到变换。在接下来的几篇文章中，我将对变换进行详细的介绍，欢迎你的阅读。

变换简介

变换在数学上的定义是这样的：

非空集合A到自身的一个映射f：A→A称为集合A的变换。 

变换是基于一个数学公式：从一个Point到新的一个Point。如果将某个对象所有的Point都应用到这个公式上，就可以达到移动、缩放、旋转等效果。

在Windows Runtime中，UIElement定义了三个属性来支持变换：

1. RenderTransform——位置变换信息
2. RenderTransformOrigin——RenderTransform变换的原点信息
3. Projection——投影效果(三维效果)

这些属性是定义在UIElement上的，可知，所有的Element都可以进行变换，例如：Image、TextBlock和Button。如果在Panel的子类(如Grid)上进行变换，那么这个子类所有的children都会同时被变换。

变换类型

在Windows Runtime中，变换类型有如下：

1. 仿射变换——RenderTransform
2. 非仿射变换——Projection

仿射变换

仿射变换的继承关系，如下图所示：

从图中我们可以看到，仿射变换有7种类型（粉色部分），平移、缩放、旋转等，在后续的文章中，我会详细介绍如何使用它们。

粉色部分的排列顺序是按照数学公式复杂度排列的，TranslateTransform最简单，TransformGroup最复杂。

这7个类定义了二维仿射变换，对象变换之后，直线依旧是直线，平行关系也不会发生改变。只不过位置、大小、方向发生改变而已。

前面已经说了RenderTransform是UIElement的属性，它的类型是Transform。所以可以把这7种类型赋值给RenderTransform。

非仿射变换——Projection

非仿射变换的继承关系，如下图所示：

非仿射变换主要用于三维视觉，在使用的时候，只需要将PlaneProjection或Matrix3DProjection赋值给UIElement的属性Projection即可。

注：在三维空间中，旋转总是基于某个轴（xyz）进行的。

很明显：在这种情况下，对象的平行关系是会改变的。

Projection变换也经常称为模拟3D变换，比如Flip(翻转)。

在后续的文章中，我会对Projection进行详细介绍。

变换演示

下面我写了个小示例，来演示一下仿射变换和非仿射变换的效果。

左边是原始效果，中间是以正中心为原点，旋转45度，右边是翻转45度

最后附上代码，方便大家自行演示效果

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