程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> UWP開發-二維變換以及三維變換,uwp二維變換三維

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

編輯:關於.NET

UWP開發-二維變換以及三維變換,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).

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

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved