HarmonyOS 角落里的知识 —— 图形变换

1,002 阅读4分钟

一、前言

在探索 HarmonyOS 的过程中,我们发现了许多有趣且实用的功能和特性。有些总是在不经意间或者触类旁通的找到。或者是某些开发痛点。其中,早上群友对Rotate有点疑惑,干脆把这玩意整一整,分享给大家。

该系列将着重分享、介绍HarmonyOS API11+的新版本特性或者奇奇怪怪的解决方案、BUG。(弃用API非必要不提及)

如果您有任何疑问、对文章写的不满意、发现错误或者有更好的方法,欢迎在评论、私信或邮件中提出,非常感谢您的支持。🙏

二、translate

translate变换主要包含以下几个参数:xyz

x、y两个参数用于指定平移的方向和距离。在2D平移中,x代表横向移动的距离,y代表纵向移动的距离。通过调整这两个坐标,我们可以实现物体在二维空间中的移动。

只移动X、Y轴效果如下:

SVID_z

z参数用于指定在垂直方向上的移动距离,也可以理解为深度。在3D空间中,通过调整z值,我们可以实现物体在垂直方向上的移动,从而产生立体效果。

移动X轴:

SVID_z

在z轴从0趋向于-∞的时候,你会发现z 轴在<0时是缩小,但是<-250时会放大,并反向。

因为存在观察点(我猜就是-250),所以离观察点越近组件越大,反之。

img

如果组件的z值超过了观察点(z > -250),会进入观察点的后方视野,导致物体变得反向。此时,物体会变得很大且反转。

三、rotate

旋转香蕉而言多了角度、旋转中心、视距

名称类型说明
xnumber旋转轴向量x坐标。
ynumber旋转轴向量y坐标。
znumber旋转轴向量z坐标。
anglenumberstring旋转角度。取值为正时相对于旋转轴方向顺时针转动,取值为负时相对于旋转轴方向逆时针转动。取值可为string类型,如'90deg'。
centerXnumberstring变换中心点x轴坐标。
centerYnumberstring变换中心点y轴坐标。
centerZnumberz轴锚点,即3D旋转中心点的z轴分量。
perspectivenumber视距,即视点到z=0平面的距离。旋转轴和旋转中心点都基于坐标系设定,组件发生位移时,坐标系不会随之移动。

在旋转中,xyz这三个参数用于指定旋转轴。在3D旋转中,x轴、y轴和z`轴分别代表水平、垂直和深度方向。

当xyz均为单独设置时,其大小只影响相对方向,全靠angle影响

1、绕Z轴:这是中心旋转

 {
   "x": 0,
   "y": 0,
   "z": 1,
   "angle": 45,
   "centerX": "50%",
   "centerY": "50%",
 }

SVID_rotate_z

2、绕Y轴:这也是左右翻转

 {
   "x": 0,
   "y": 1,
   "z": 0,
   "angle": 45,
   "centerX": "50%",
   "centerY": "50%",
 }

SVID_rotate_y

3、绕X轴:这也是上下翻转

 {
   "x": 1,
   "y": 0,
   "z": 0,
   "angle": 45,
   "centerX": "50%",
   "centerY": "50%",
 }

SVID_rotate_x

三者如果合并的话,就是空间向量的合了,需要空间想象力。

4、centerX、centerY、centerZ

默认情况下,旋转是围绕图形的中心进行的。通过调整centerX、centerY、centerZ,可以改变旋转的中心点,使得变换效果更灵活。而centerZ就是在三维中的点了。

我们可以看到GIF中的红点。

SVID_rotate_center

5、perspective

perspective是透视参数,它可以模拟物体在远近不同的位置看起来大小不同的效果。有点类似平行于z轴的角度 rotate默认是z轴旋转,需要设置旋转参数中 x 或者y轴的参数。

想象你在看一条笔直的公路,这条公路会在远处逐渐变窄,直到消失在视线尽头。这就是透视效果。

无透视效果:当perspective为0时,图形在旋转时不会有任何深度变化,看起来像是平面的旋转。

有透视效果:当perspective值较大时,图形在旋转时会产生明显的深度变化,产生3D效果。

(实际操作中并不明显)

四、Scale

scale参数如下:

名称类型说明
xnumberx轴的缩放倍数。x>1时以x轴方向放大,0<x<1时以x轴方向缩小,x<0时沿x轴反向并缩放。
ynumbery轴的缩放倍数。y>1时以y轴方向放大,0<y<1时以y轴方向缩小,y<0时沿y轴反向并缩放。
znumberz轴的缩放倍数。z>1时以z轴方向放大,0<z<1时以z轴方向缩小,z<0时沿z轴反向并缩放。
centerXnumberstring变换中心点x轴坐标。
centerYnumberstring变换中心点y轴坐标。

SVID_scale

在二维平面中,Z轴的缩放通常没有直接的视觉效果~

五、预告

下篇分享矩阵变换(可能)

六、结尾

没了。

如果您有任何疑问、对文章写的不满意、发现错误或者有更好的方法,欢迎在评论、私信或邮件中提出,非常感谢您的支持。🙏