鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：图形变换）

最新推荐文章于 2024-04-07 17:38:39 发布
最新推荐文章于 2024-04-07 17:38:39 发布
阅读量1.6k 收藏 9
点赞数 17
分类专栏： 鸿蒙 鸿蒙-ArkTS 文章标签： harmonyos 华为 android 鸿蒙 鸿蒙系统 ArkTS ArkUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64420071/article/details/136422222
版权
本文详细介绍了HarmonyOS中的组件变换功能，包括rotate、translate、scale和transform方法，以及各自支持的API版本和参数说明。这些操作在组件布局和3D效果中起到关键作用，适用于ArkTS卡片和系统能力SystemCapability.ArkUI.ArkUI.Full。
摘要由CSDN通过智能技术生成

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

说明：

从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+number否z轴锚点，即3D旋转中心点的z轴分量。
perspective10+number否视距，即视点到z=0平面的距离。
旋转轴和旋转中心点都基于坐标系设定，组件发生位移时，坐标系不会随之移动。

TranslateOptions对象说明

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

名称类型必填说明
xnumber | string否x轴的平移距离。
ynumber | string否y轴的平移距离。
znumber | string否z轴的平移距离。

ScaleOptions对象说明

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

名称类型必填说明
xnumber否x轴的缩放倍数。x>1时以x轴方向放大，0<x<1时以x轴方向缩小，x<0时沿x轴反向并缩放。
ynumber否y轴的缩放倍数。y>1时以y轴方向放大，0<y<1时以y轴方向缩小，y<0时沿y轴反向并缩放。
znumber否z轴的缩放倍数。z>1时以z轴方向放大，0<z<1时以z轴方向缩小，z<0时沿z轴反向并缩放。
centerXnumber | string否变换中心点x轴坐标。
centerYnumber | string否变换中心点y轴坐标。

说明：

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

示例

// xxx.ets
import matrix4 from '@ohos.matrix4'

@Entry
@Component
struct TransformExample {
  build() {
    Column() {
      Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
      Row()
        .rotate({
          x: 0,
          y: 0,
          z: 1,
          centerX: '50%',
          centerY: '50%',
          angle: 300
        }) // 组件以矢量(0,0,1)为旋转轴，绕中心点顺时针旋转300度
        .width(100).height(100).backgroundColor(0xAFEEEE)

      Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(14)
      Row()
        .translate({ x: 100, y: 10 }) // x轴方向平移100，y轴方向平移10
        .width(100).height(100).backgroundColor(0xAFEEEE).margin({ bottom: 10 })

      Text('scale').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
      Row()
        .scale({ x: 2, y: 0.5 }) // 高度缩小一倍，宽度放大一倍，z轴在2D下无效果
        .width(100).height(100).backgroundColor(0xAFEEEE)

      Text('Matrix4').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
      Row()
        .width(100).height(100).backgroundColor(0xAFEEEE)
        .transform(matrix4.identity().translate({ x: 50, y: 50 }).scale({ x: 1.5, y: 1 }).rotate({
          x: 0,
          y: 0,
          z: 1,
          angle: 60
        }))
    }.width('100%').margin({ top: 5 })
  }
}

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学习资料

总结

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

代码与思维
关注
  • 17
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Harmony设置旋转角度
海阔天空
02-19 178
Harmony设置旋转角度
HarmonyOS移动应用开发（ArkTS版）课件PPT
11-14
HarmonyOS 移动应用开发（ArkTS版）是面向开发者的一门课程，旨在教授如何使用 ArkTS 语言在 HarmonyOS 上构建高效、跨平台的应用。本课程由刘安战、余雨萍、陈争艳三位专家编著，由清华大学出版社出版。 ArkTS 是 ...
鸿蒙Harmony应用开发—ArkTS-转场动画（组件内转场）
m0_64420071的博客
03-20 1234
组件内转场主要通过transition属性配置转场参数，在组件插入和删除时显示过渡动效，主要用于容器组件中的子组件插入和删除时，提升用户体验。
图形变换 ，鸿蒙
Asia52的博客
03-23 137
X轴缩放比例, y?: Y轴缩放比例, z?: Z轴缩放比例, centerX?: Y轴中心点坐标, centerY?参数：{angle: 旋转角度, centerX?: Y轴中心点坐标, centerY?: X轴移动距离, y?: Y轴移动距离, z?作用：可使组件在以组件左上角为坐标原点的坐标系中进行移动。作用：可使组件在以组件左上角为坐标原点的坐标系中进行旋转。作用：分别设置X轴、Y轴、Z轴的缩放比例，默认值为1。属性：translate()属性：scale(),属性：rotate()
OpenHarmony开发实战：转场动画的使用（ArkTS）
最新发布
shudaoshanQAQ的博客
04-07 1073
我们将会通过一个简单的样例，学习如何基于ArkTS的声明式开发范式开发转场动画。
详细教程 - 进阶版 鸿蒙harmonyOS应用 第十九节——鸿蒙OS图形图像技术深度指南
爱蹦跶的全栈大A阿
12-23 1537
图形图像技术是构建鸿蒙OS视觉交互的基石。它涵盖了图像处理、图形渲染、动画特效等多种能力。随着智能设备的普及,高质量的图像处理与图形渲染成为了提升用户体验的重要一环。鸿蒙系统提供了丰富的graphics图形图像API,通过OpenGL ES与自研引擎为开发者提供强大支持。本文将深入解析图像处理的主要操作、OpenGL ES的渲染原理、动画与特效的实现方法以及相机对接等内容,帮助开发者掌握鸿蒙OS强大的图形能力。图像处理的主要操作与功能OpenGL ES在鸿蒙OS的应用实现。
鸿蒙开发图形图像：【图形子系统】
2301_76813281的博客
03-22 1092
图形子系统主要包括UI组件、布局、动画、字体、输入事件、窗口管理、渲染绘制等模块，构建基于轻量OS的应用框架，满足硬件资源较小的物联网设备的OpenHarmony系统应用开发。图 1图形子系统架构图View：应用组件，包括UIView、UIViewGroup、UIButton、UILabel、UILabelButton、UIList、UISlider等。Animator：动画模块，开发者可以自定义动画。Layout：布局控件，包括FlexLayout、GridLayout、ListLayout等。
ArkTS-属性动画和显式动画
qq_41154522的博客
11-28 878
鸿蒙开发-属性动画和显式动画
HarmonyOS移动应用开发
04-07
通过该课程的学习，您将掌握HarmonyOS基本概念及原理、HarmonyOS技术架构、HarmonyOS应用开发流程、Ability与UI开发知识，具备HarmonyOS功能开发、调试与发布的能力，能够胜任HarmonyOS应用开发工程师岗位。
基于鸿蒙HarmonyOS，使用ArkTS开发纯净的浏览器（小狐狸浏览器）.zip
02-07
在本项目中，我们将探讨如何基于华为的鸿蒙HarmonyOS操作系统，利用 ArkTS 开发一个纯净的浏览器应用，以“小狐狸浏览器”为例。鸿蒙系统是华为面向物联网时代推出的一款全新分布式操作系统，旨在提供跨平台、跨设备...
一款虫部落搜索论坛第三方鸿蒙 App，使用 ArkTS 与 ArkUI 声明式开发，采用最新的 HarmonyOS API 9
02-07
标题中的“一款虫部落搜索论坛第三方鸿蒙 App”揭示了这款应用是专门为虫部落搜索论坛设计的第三方应用程序，而且是基于华为的鸿蒙操作系统（HarmonyOS）开发的。鸿蒙系统是华为自主开发的面向全场景的分布式操作...
华为鸿蒙HarmonyOS开发整理资料汇总.zip
11-25
华为鸿蒙HarmonyOS开发整理资料汇总，共38份。 1学前必读：HarmonyOS学习资源主题分享 2学前必读：OpenHarmony-联盟生态资料合集 3-1.HarmonyOS概述：技术特性 3-2.HarmonyOS概述：开发工具与平台 3-3.HarmonyOS...
ArkTS的手势处理（部分）
Selma003的博客
12-20 1258
ArkTS的部分手势处理。
【arkts】HarmonyOS 实现图片的水平翻转和垂直翻转
hanacha_的博客
03-11 326
图片水平（左右）翻转。图片垂直（上下）翻转。
【HarmonyOS】ArkTS学习之页面转场动画的实现
Mayism123的博客
07-11 1894
ArkTS是通过在全局pageTransition方法内配置页面入场(PageTransitionEnter)和页面退场(PageTransitionExit)时的自定义转场动效来实现页面转场动画的，下图是关于PageTransitionEnter和PageTransitionExit的说明。动画分为属性属性动画、显示动画、转场动画和路径动画，而转场动画又包含页面间转场、组件内转场和共享元素转场。我觉得页面转场动画挺有趣的，所以今天就浅浅的给大家分享一个用ArkTS实现页面转场动画的demo。
【图片旋转】十五分钟挑战鸿蒙Codelab组件
liuzhen007的专栏
04-25 3027
目录 前言 正文 步骤一、创建工程 步骤二、将图片转换为PixelMap 步骤三、图片参数设置 步骤四、图片镜像操作 步骤五、运行演示 结果 前言 图片处理是目前移动端APP比较常用的需求之一，作为移动端系统平台，HarmonyOS图像模块已经支持了图像业务的开发。比如，常见的图像解码、图像编码、基本的位图操作、图像编辑等。当然，也支持通过接口组合来实现更复杂的图像处理逻辑。今天，我们就来看一下。 正文 本文以图片的旋转、剪裁、缩放、镜像四种常见操作为例，给大家介绍Harmon.
变型、旋转与缩放（z轴透视效果）
comegoing_xin_lv的博客
09-01 581
变型、旋转的3D效果与偏移量
鸿蒙自定义控件实现罗盘数字时钟效果
Abner_Crazy的博客
03-23 856
鸿蒙自定义控件实现罗盘数字时钟效果，仿抖音数字时钟罗盘效果
ArkTS 实现图片旋转
11-16
根据提供的引用，ArkTS是一个基于TypeScript的图像处理库，可以用于旋转图片。以下是使用ArkTS旋转图片的步骤： 1.安装ArkTS库 ```shell npm install arcts ``` 2.导入ArkTS库 ```typescript import * as arcts from 'arcts'; ``` 3.创建一个Image对象 ```typescript const img = new arcts.Image('/path/to/image.jpg'); ``` 4.旋转图片 ```typescript img.rotate(90); // 旋转90度 ``` 5.保存旋转后的图片 ```typescript img.save('/path/to/rotated/image.jpg'); ``` 注意：以上代码仅为示例，实际使用时需要根据具体情况进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值