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

时间:2023-03-08 15:49:41

在开发中,由于某些需求,我们可能需要做一些平移,缩放,旋转甚至三维变换,所以我来讲讲在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, ,
M31,M32,M33, ,
X , Y , Z , "/>

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

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

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