在開發中,由於某些需求,我們可能需要做一些平移,縮放,旋轉甚至三維變換,所以我來講講在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).
好了,基本講完了,如果你說矩陣部分還是沒看懂,我只能說你真的需要學習了。