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：

我想，學過線性代數的應該都知道了吧,就是矩陣的乘法；假設點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：

　　設點 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).

好了，基本講完了，如果你說矩陣部分還是沒看懂，我只能說你真的需要學習了。