UWP开发-二维变换以及三维变换

在开发中，由于某些需求，我们可能需要做一些平移，缩放，旋转甚至三维变换，所以我来讲讲在UWP中这些变换的实现方法。

一、

　　二维变换：

 UIElement.RenderTransform

　　a、TranslateTransform，平移：

　　　　属性：X,Y我相信大家都知道怎么用，这里就不讲废话了

　　b、RotateTransform，旋转：

　　　　属性：Angle

　　c、ScaleTransform，缩放：

　　　　属性：ScaleX，ScaleY

　　d、SkewTransform，扭曲：

　　　　属性：AngleX，AngleY

　　e、MatrixTransform，矩阵变换

　　　　Xmal用法：

<MatrixTransform Matrix="M11 M12 M21 M22 X Y">

　　　　这个就稍微复杂一点，理论上可以做任何变换。说起来复杂，其实也就是一个变换矩阵而已

矩阵M：

M11	M12	0
M21	M22	0
X	Y	1

我想，学过线性代数的应该都知道了吧,就是矩阵的乘法；假设点p0（x0,y0）,则变换后的点为p1=[x0,y0,1]*M：

　　　　x1 =  x0 * M11 + x0 * M21 + X ;

　　　　y1 = y0 * M12 + y0 * M22 + Y;

　　p1(x1,y1).

ps:矩阵的点乘简单的说就是行*列相加，也就是说假如矩阵X点乘Y，则X的列数必须等于Y的行数。

额外的，如果需要同时做多种变换，UWP提供了两种方法：

　　1.TransformGroup，变换群组：

　　　　

　　　　　　　　   <TransformGroup>
                    <RotateTransform />
                    <ScaleTransform />
                </TransformGroup>

因为在RenderTransform下只能有一个子元素，所以当需要同时用多种变换时需要一个TransfromGroup。

　　2.CompositeTransform，复合变换：

　　　　属性：TranslateX，TranslateY，Rotate等

需要注意的是，变换是需要一个中心点的，这里UWP提供了两种设置中心点的方法：

　　1.RenderTransformOrigin：

　　　　这个属性为需要变换的控件的属性而非RenderTransform的属性，其值为Point(x,y).在控件内的值为0-1，大于1时，变换中心将处于控件外甚至布局之外。

　　2.CenterX，CenterY：

　　　　设置绝对X轴和Y轴的值，这里为绝对值而非相对值。

　　建议使用前者。在大多数情况下，我们并不知道控件的具体大小，而前者使用的是相对值所以无论是代码量还是计算量都要优于后者。

二、

　　三维变换：

　UIElement.Projection

　　a、PlaneProjection

　　　　属性：CenterOfRotationX，CenterOfRotationY，CenterOfRotationZ; 旋转的中心点 P(x,y,z)

　　　　　　   GlobalOffsetX,GlobalOffsetY,GlobalOffsetZ; 世界坐标系的平移

　　　　　　   LocalOffsetX,LocalOffsetY,LocalOffsetZ; 局部坐标系

　　　　　　   RotationX,RotationY,RotationZ; 分别绕X，Y，Z轴的旋转角度

如果不明白为什么有两个坐标系，参照 《三维图形系统中两种坐标系之间的坐标变换》。

　　b、Matrix3DProjection

　　　　Xaml用法：

<Matrix3DProjection  ProjectionMatrix=　　　　"M11,M12,M13, 0,
                                              M21,M22,M23, 0,
                                              M31,M32,M33, 0,
                                               X , Y , Z , 1"/>

　　　　和上面二维矩阵变换类似，只是增加了一个维度而已：

矩阵M：

M11	M12	M13	0
M21	M22	M23	0
M31	M32	M33	0
X	Y	Z	1

　　设点 p0(x0,y0,z0),则变换后的点为：p1=[x0,y0,z0,1]*M

　　　　x1=x0*M11+x0*M21+x0*M31+1*X;

　　　　y1=y0*M12+y0*M22+Y0*M32+1*Y;

　　　　z1=z0*M13+z0*M23+z0+M33+1*Z;

　　p1(x1,y1,z1).

好了，基本讲完了，如果你说矩阵部分还是没看懂，我只能说你真的需要学习了。