当前位置：首页 > news >正文

HormonyOS: 图形变换之Rotate

news 来源：原创 2025/5/13 6:28:10

官网地址：rotate

1. 概述

rotate是鸿蒙系统为组件提供的旋转属性，通过rotate属性，可实现组件的旋转效果

2. rotate属性

2.1. 语法参数

rotate(value: RotateOptions)

参数：

参数名

类型

必填

说明

value

RotateOptions

是

可使组件在以组件左上角为坐标原点的坐标系中进行旋转（坐标系如下图所示）。其中，(x, y, z）指定一个矢量，作为旋转轴。

旋转轴和旋转中心点都基于坐标系设定，组件发生位移时，坐标系不会随之移动。

默认值: 在x、y、z都不指定时，x、y、z的默认值分别为0、0、1。指定了x、y、z任何一个值时，x、y、z中未指定的值默认为0。

{

centerX: '50%',

centerY: '50%'

centerZ: 0,

perspective: 0

}

单位：vp

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

RotateOptions：

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

2.2. 原理详解

组件在旋转时，是以自身的左上角为坐标系进行旋转，需要选定旋转轴以及旋转中心点，默认旋转轴为z轴，中心点为组件的中心，也就是ceterX = ‘50%’，centerY = '50%'

上图是以centerX = '50%', centerY = '50%', z轴为旋转轴，旋转70°的效果（z轴方向：从屏幕外向屏幕里）

旋转中心点也可以设置，例如，centerX = 0, centerY = 0, 讲旋转中心点设置为组件的左上角

x轴和y轴的旋转跟z轴的规则一致，具体看demo样例

2.3. Demo样例

@Observed
class RotateInfo {public x: number = 0;public y: number = 0;public z: number = 200;public angle: number = 0;centerX: number | string = '50%';centerY: number | string = '50%';centerZ: number = 0;perspective: number = 0
}@Component
struct RotateView {@State rotateInfo: RotateInfo = new RotateInfo()build() {Stack() {Row().width(200).height(100).position({ x: 100, y: 100 }).border({ width: 1, color: Color.Pink }).borderStyle(BorderStyle.Dashed)Row().width(200).height(100).rotate({x: this.rotateInfo.x,y: this.rotateInfo.y,z: this.rotateInfo.z,angle: this.rotateInfo.angle,centerX: this.rotateInfo.centerX,centerY: this.rotateInfo.centerY}).backgroundColor(Color.Pink).position({ x: 100, y: 100 }).animation({ duration: 2000 })Row({ space: 10 }) {Button('rotate 70,中心点为左上角').onClick(() => {this.rotateInfo.angle = 70;this.rotateInfo.x = 0this.rotateInfo.y = 0this.rotateInfo.z = 1})}.position({ x: 0, y: 300 })}.border({ width: 1, color: Color.Green }).width(400).height(350)}
}

旋转中心点：centerX = '50%', centerY = '50%', z轴为旋转轴

Row({ space: 10 }) {Button('rotate 70,中心点为左上角').onClick(() => {this.rotateInfo.angle = 70;this.rotateInfo.x = 0this.rotateInfo.y = 0this.rotateInfo.z = 1this.rotateInfo.centerX = 0;this.rotateInfo.centerY = 0;})}.position({ x: 0, y: 300 })

Row({ space: 10 }) {Button('rotate 70,中心点为左上角，x为旋转轴').onClick(() => {this.rotateInfo.angle = 70;this.rotateInfo.x = 1this.rotateInfo.y = 0this.rotateInfo.z = 0this.rotateInfo.centerX = 0;this.rotateInfo.centerY = 0;})}.position({ x: 0, y: 300 })

      Row({ space: 10 }) {Button('rotate 70,中心点为左上角，y为旋转轴').onClick(() => {this.rotateInfo.angle = 70;this.rotateInfo.x = 0this.rotateInfo.y = 1this.rotateInfo.z = 0this.rotateInfo.centerX = 0;this.rotateInfo.centerY = 0;})}.position({ x: 0, y: 300 })

      Row({ space: 10 }) {Button('rotate 70,中心点为左上角，xy同为旋转轴').onClick(() => {this.rotateInfo.angle = 70;this.rotateInfo.x = 1this.rotateInfo.y = 1this.rotateInfo.z = 0this.rotateInfo.centerX = 0;this.rotateInfo.centerY = 0;})}.position({ x: 0, y: 300 })

旋转轴同时可以设置多个，如上x和y同时为旋转轴，旋转时为绕着两个旋转轴旋转。

3. 总结

对于rotate属性而言，需要重点理解一下几点：

参考坐标系为组件自身的左上角
旋转中心点的设置。旋转中心点决定了组件围绕着哪个点进行旋转，中心点不一样，旋转后的位置也不同。默认位置是组件的中心点，也就是宽高各自的50%。
旋转轴的设置。旋转轴决定了组件旋转的方向，旋转轴可以设置多个，默认为z轴

HormonyOS: 图形变换之Rotate

官网地址：rotate 1. 概述 rotate是鸿蒙系统为组件提供的旋转属性，通过rotate属性，可实现组件的旋转效果 2. rotate属性 2.1. 语法参数 rotate(value: RotateOptions) 参数： 参数名类型必填说明 value RotateOptions…...

编程日记 2025/5/13 6:28:10

【Solidity】入门指南：智能合约开发基础

🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈｜ 炫酷HTML | JavaScript基础 💫个人格言: "如无必要，勿增实体" 文章目录 Solidity入门指南：智能合约开发基础引言1. 开发环境搭建1.1 Remix I…...

编程日记 2025/5/13 5:38:47

HTMLHTML5革命：构建现代网页的终极指南 - 3. 开发工具选择

HTML&HTML5革命：构建现代网页的终极指南 3. 开发工具选择大家好，我是莫离老师。前两节课我们学习了 HTML 的基础概念和 HTML5 的主要特性，为接下来的实际开发奠定了理论基础。今天，我们将讨论开发工具的选择问题。选择合…...

编程日记 2025/5/13 5:23:42

智能设备安全隐患：五项关键解决措施

目前，我们的智能设备越来越多，而背后的物联网（IoT）安全像一面隐形的盾牌，默默地守护着我们周围那些复杂连网的设备。为了让大家更加明白这些安全协议和操作是如何高效运作的，我们有必要深入探讨物联网安全…...

编程日记 2025/5/13 5:37:34

Android NDK开发 JNI 基础

在android 系统开发中 ndk开发是很重要的内容。ndk开发中 jni 是基础。目录一．什么是JNI 二. 如何使用JNI 1.Java 代码如何调用 c/c 代码 2. c/c如何调用 java 函数一．什么是JNI JNI——Java Native Interface，它是Java平台的一个特…...

编程日记 2025/5/6 17:34:14

嵌入式linux之文件系统管理

嵌入式Linux文件系统的管理涉及多个方面，包括文件系统的创建、配置、维护以及优化。以下是一些关键点和实践技巧： 文件系统的创建与配置选择合适的文件系统：根据应用需求（如读写频率、存储介质类型等）选择最合适的文…...

编程日记 2025/5/13 4:46:35

Y20030029 微信+SPRINGBOOT+MYSQL+LW+传统文化展示小程序的设计与实现源代码配置文档

传统文化展示小程序 1.项目描述2. 课题开发的背景与意义3.项目功能4.界面展示5.源码获取 1.项目描述基于微信小程序的传统文化展示小程序是一个集合了多种传统文化元素与现代化技术的创新平台。它充分利用了微信小程序的便捷性和普及性，为广大用户提供了一个深入了…...

编程日记 2025/5/12 11:51:49

【LC】3232. 判断是否可以赢得数字游戏

题目描述： 给你一个正整数数组 nums。 Alice 和 Bob 正在玩游戏。在游戏中，Alice 可以从 nums 中选择所有个位数或所有两位数，剩余的数字归 Bob 所有。如果 Alice 所选数字之和严格大于 Bob 的数字之和，则 Alice 获胜。如果…...

编程日记 2025/5/13 5:07:34

【人工智能基础03】机器学习（练习题）

文章目录课本习题监督学习的例子过拟合和欠拟合常见损失函数，判断一个损失函数的好坏无监督分类：kmeans无监督分类，Kmeans 三分类问题变换距离函数选择不同的起始点重点回顾1. 监督学习、半监督学习和无监督学习的定义2. 判断学习场景3. 监…...

编程日记 2025/5/13 4:55:56

C/C++每日一练：合并K个有序链表

本篇博客将探讨如何 “合并K个有序链表” 这一经典问题。本文将从题目要求、解题思路、过程解析和相关知识点逐步展开，同时提供详细注释的代码示例。链表（Linked List） 链表是一种线性数据结构，由一系列节点（Node&…...

编程日记 2025/5/6 20:21:14

jmeter基础07_组件的层级

课程大纲 1. 优先级/执行顺序（一般情况） 同级组件：按组件先后顺序执行。如：同一层的线程组、同一层的http请求。上下级组件：先执行外层（上级），再执行内层（下级&#xff…...

编程日记 2025/5/13 5:55:00

【QNX+Android虚拟化方案】125 - 如何创建android-spare镜像

【QNX+Android虚拟化方案】125 - 如何创建android-spare镜像 1. Android侧创建 (ext4 / sparse) test_img.img 镜像方法一2. Android侧创建 (ext4 / sparse) test_img.img 镜像方法二3. qnx 侧分区透传Android 配置3.1 配置分区透传3.2 Android 侧分区 rename3.3 创建挂载目…...

编程日记 2025/5/10 10:23:56

大R玩家流失预测在休闲社交游戏中的应用

摘要预测玩家何时会离开游戏为延长玩家生命周期和增加收入贡献创造了独特的机会。玩家可以被激励留下来，战略性地与公司组合中的其他游戏交叉链接，或者作为最后的手段，通过游戏内广告传递给其他公司。本文重点预测休闲社交游戏中高价值玩家…...

编程日记 2025/5/13 4:54:44

使用Postman搞定各种接口token实战

现在许多项目都使用jwt来实现用户登录和数据权限，校验过用户的用户名和密码后，会向用户响应一段经过加密的token，在这段token中可能储存了数据权限等，在后期的访问中，需要携带这段token，后台解析这段token才…...

编程日记 2025/5/13 4:48:56

【C++】printf 函数详解与格式化输出控制

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯printf 基础用法1.1 printf 的常见占位符1.2 占位符与参数的对应关系1.3 换行控制示例： 💯格式化输出控制2.1 输出宽度控制2.1.1 指定最小宽度 2.2 …...

编程日记 2025/5/13 5:45:29

在21世纪的我用C语言探寻世界本质——字符函数和字符串函数(1)

人无完人，持之以恒，方能见真我！！！ 共同进步！！ 文章目录一、字符分类函数二、字符转换函数三、strlen的使用和模拟实现四、strcpy的使用和模拟实现五、strcat的使用和模拟实现六、strcmp的使用和…...

编程日记 2025/5/12 15:36:12

【专题】存储器管理

1. 存储器的层次结构在计算机执行时，几乎每一条指令都涉及对存储器的访问，因此要求对存储器的访问速度能跟得上处理机的运行速度。存储器的速度必须非常快，能与处理机的速度相匹配，否则会明显地影响到处理机的运行。此外还要求…...

编程日记 2025/5/12 15:40:03

python股票数据分析（Pandas）练习

需求： 使用pandas读取一个CSV文件，文件内容包括股票名称、价格和交易量。完成以下任务： 找出价格最高的股票； 计算总交易量； 绘制价格折线图。代码实现： import pandas as pd import matplotlib.pyplot …...

编程日记 2025/5/9 18:28:00

Hadoop生态圈框架部署（八）- Hadoop高可用（HA）集群部署

文章目录前言一、部署规划二、Hadoop HA集群部署（手动部署）1. 下载hadoop2. 上传安装包2. 解压hadoop安装包3. 配置hadoop配置文件3.1 虚拟机hadoop1修改hadoop配置文件3.1.1 修改 hadoop-env.sh 配置文件3.3.2 修改 core-site.xml 配置文件3.3.3 修改 …...

编程日记 2025/5/13 4:59:19

抗干扰设计的检查细则

抗干扰设计是确保电子系统或设备在复杂电磁环境中稳定运行的重要环节，涉及多个方面的设计和实施。以下是对抗干扰设计的检查细则的详细归纳： 一、电源线与地线设计电源线设计：选择合适的电源，尽量加宽电源线，保证电源…...

编程日记 2025/5/13 5:39:53

[Redis#12] 常用类型接口学习 | string | list

目录 0.准备 1.string get | set set_with_timeout_test.cpp set_nx_xx_test.cpp mset_test.cpp mget_test.cpp getrange_setrange_test.cpp incr_decr_test.cpp 2.list lpush_lrange_test.cpp rpush_test.cpp lpop_rpop_test.cpp blpop_test.cpp llen_test.cpp…...

编程日记 2025/5/12 6:47:35

React的ts文件中通过createElement拼接一段内容出来

比如接口返回一个值 const values [23.00, 40.00/kg];想做到如下效果， 如果单纯的用render渲染会很简单， 但是在ts文件中处理，所以采用了createElement拼接代码如下： format: (values: string[]) > {if (!values || !val…...

编程日记 2025/5/12 17:45:02

【Git系列】Git 提交历史分析：深入理解`git log`命令

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学…...

编程日记 2025/5/13 4:37:20

深度学习笔记——生成对抗网络GAN

本文详细介绍早期生成式AI的代表性模型：生成对抗网络GAN。文章目录一、基本结构生成器判别器二、损失函数判别器生成器交替优化目标函数三、GAN 的训练过程训练流程概述训练流程步骤1. 初始化参数和超参数2. 定义损失函数3. 训练过程的迭代判别器训练步骤生成器…...

编程日记 2025/5/5 17:32:01

《地球科学与环境学报》

《地球科学与环境学报》报道范围涵盖基础地质、矿产地质、水资源与环境、工程地质、地球物理、地球信息科学等领域，刊载国内外未公开发表的有创新性或意义重大的研究论文和综述文章。　　来稿必须包括以下项目：题名（尽可能不要超过20字&…...

编程日记 2025/5/6 10:26:33

k8s 1.28 聚合层部署信息记录

–requestheader-client-ca-file –requestheader-allowed-namesfront-proxy-client –requestheader-extra-headers-prefixX-Remote-Extra- –requestheader-group-headersX-Remote-Group –requestheader-username-headersX-Remote-User –proxy-client-cert-file –proxy-cl…...