在开发中,由于某些需求,我们可能需要做一些平移,缩放,旋转甚至三维变换,所以我来讲讲在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).
好了,基本讲完了,如果你说矩阵部分还是没看懂,我只能说你真的需要学习了。