UWP開發-二維變換以及三維變換

在開發中，因爲某些需求，咱們可能須要作一些平移，縮放，旋轉甚至三維變換，因此我來說講在UWP中這些變換的實現方法。

1、

　　二維變換：

 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軸的值，這裏爲絕對值而非相對值。

　　建議使用前者。在大多數狀況下，咱們並不知道控件的具體大小，而前者使用的是相對值因此不管是代碼量仍是計算量都要優於後者。

2、

　　三維變換：

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

好了，基本講完了，若是你說矩陣部分仍是沒看懂，我只能說你真的須要學習了。