当前位置:   article > 正文

鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:图形变换)_arkts rotate

arkts rotate

用于对组件进行旋转、平移、缩放、矩阵变换等操作。

说明:

从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

rotate

rotate(value: RotateOptions)

设置组件旋转。

卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueRotateOptions可使组件在以组件左上角为坐标原点的坐标系中进行旋转(坐标系如下图所示)。其中,(x, y, z)指定一个矢量,作为旋转轴。
旋转轴和旋转中心点都基于坐标系设定,组件发生位移时,坐标系不会随之移动。
默认值:
{
x: 0,
y: 0,
z: 0,
centerX: '50%',
centerY: '50%'
centerZ: 0,
perspective: 0
}

coordinates


centerZ、perspective从API version 10开始支持在ArkTS卡片中使用。

translate

translate(value: TranslateOptions)

设置组件平移。

卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueTranslateOptions可使组件在以组件左上角为坐标原点的坐标系中进行移动(坐标系如下图所示)。其中,x,y,z的值分别表示在对应轴移动的距离,值为正时表示向对应轴的正向移动,值为负时表示向对应轴的反向移动。移动距离支持数字和字符串(比如'10px',‘10%’)两种类型。
默认值:
{
x: 0,
y: 0,
z: 0
}

coordinates

scale

scale(value: ScaleOptions)

设置组件缩放。

卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueScaleOptions可以分别设置X轴、Y轴、Z轴的缩放比例,默认值为1,同时可以通过centerX和centerY设置缩放的中心点。
默认值:
{
x: 1,
y: 1,
z: 1,
centerX:'50%',
centerY:'50%'
}

transform

transform(value: Matrix4Transit)

设置组件旋转。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueMatrix4Transit设置当前组件的变换矩阵。

RotateOptions对象说明

从API version 9开始,该接口支持在ArkTS卡片中使用。

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

TranslateOptions对象说明

从API version 9开始,该接口支持在ArkTS卡片中使用。

名称类型必填说明
xnumber | stringx轴的平移距离。
ynumber | stringy轴的平移距离。
znumber | stringz轴的平移距离。

ScaleOptions对象说明

从API version 9开始,该接口支持在ArkTS卡片中使用。

名称类型必填说明
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轴反向并缩放。
centerXnumber | string变换中心点x轴坐标。
centerYnumber | string变换中心点y轴坐标。

说明:

当组件同时设置了rotate和scale属性时,centerX和centerY的取值会发生冲突,此时centerX和centerY的值以最后设定的属性的值为准。

示例

  1. // xxx.ets
  2. import matrix4 from '@ohos.matrix4'
  3. @Entry
  4. @Component
  5. struct TransformExample {
  6. build() {
  7. Column() {
  8. Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
  9. Row()
  10. .rotate({
  11. x: 0,
  12. y: 0,
  13. z: 1,
  14. centerX: '50%',
  15. centerY: '50%',
  16. angle: 300
  17. }) // 组件以矢量(0,0,1)为旋转轴,绕中心点顺时针旋转300
  18. .width(100).height(100).backgroundColor(0xAFEEEE)
  19. Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(14)
  20. Row()
  21. .translate({ x: 100, y: 10 }) // x轴方向平移100,y轴方向平移10
  22. .width(100).height(100).backgroundColor(0xAFEEEE).margin({ bottom: 10 })
  23. Text('scale').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
  24. Row()
  25. .scale({ x: 2, y: 0.5 }) // 高度缩小一倍,宽度放大一倍,z轴在2D下无效果
  26. .width(100).height(100).backgroundColor(0xAFEEEE)
  27. Text('Matrix4').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
  28. Row()
  29. .width(100).height(100).backgroundColor(0xAFEEEE)
  30. .transform(matrix4.identity().translate({ x: 50, y: 50 }).scale({ x: 1.5, y: 1 }).rotate({
  31. x: 0,
  32. y: 0,
  33. z: 1,
  34. angle: 60
  35. }))
  36. }.width('100%').margin({ top: 5 })
  37. }
  38. }

transform

最后,有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(Harmony NEXT)资料用来跟着学习是非常有必要的。 

这份鸿蒙(Harmony NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(Harmony NEXT)技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!

 获取这份完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙(Harmony NEXT)最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料,请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/713457
推荐阅读
相关标签
  

闽ICP备14008679号