79.HarmonyOS NEXT 手势操作模型详解:移动、缩放与旋转的实现原理

温馨提示:本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦!

HarmonyOS NEXT 手势操作模型详解:移动、缩放与旋转的实现原理

文章目录

  • HarmonyOS NEXT 手势操作模型详解:移动、缩放与旋转的实现原理
    • 1. 模型概述
    • 2. @Observed装饰器解析
      • 2.1 什么是@Observed?
      • 2.2 使用场景
    • 3. 位置模型(PositionModel)详解
      • 3.1 核心属性说明
      • 3.2 使用场景
    • 4. 偏移模型(OffsetModel)详解
      • 4.1 核心属性说明
      • 4.2 关键方法解析
      • 4.3 使用场景
    • 5. 旋转模型(RotateModel)详解
      • 5.1 核心属性说明
      • 5.2 关键方法解析
      • 5.3 使用场景
    • 6. 缩放模型(ScaleModel)详解
      • 6.1 核心属性说明
      • 6.2 关键方法解析
      • 6.3 使用场景
    • 7. 实践应用
      • 最佳实践建议

1. 模型概述

这组模型类主要用于处理手势交互中的各种变换操作,包括:

  • 位置控制(PositionModel)
  • 偏移计算(OffsetModel)
  • 旋转处理(RotateModel)
  • 缩放控制(ScaleModel)

2. @Observed装饰器解析

2.1 什么是@Observed?

@Observed是HarmonyOS中的一个重要装饰器,用于实现数据响应式。当被@Observed装饰的类的属性发生变化时,会自动触发UI更新。

2.2 使用场景

  • 需要响应式更新UI的数据模型
  • 与状态管理相关的类
  • 需要在数据变化时自动刷新视图的场景

3. 位置模型(PositionModel)详解

@Observed
export class PositionModel {x: number;y: number;constructor(x: number = 0, y: number = 0) {this.x = x;this.y = y;}
}

3.1 核心属性说明

属性类型默认值说明
xnumber0横坐标位置
ynumber0纵坐标位置

3.2 使用场景

  • 记录元素的绝对位置
  • 存储目标位置信息
  • 作为位置计算的基准点

4. 偏移模型(OffsetModel)详解

@Observed
export class OffsetModel {public currentX: number;public currentY: number;public lastX: number = 0;public lastY: number = 0;// ... 其他方法
}

4.1 核心属性说明

属性类型说明
currentXnumber当前X轴偏移量
currentYnumber当前Y轴偏移量
lastXnumber上一次X轴偏移量
lastYnumber上一次Y轴偏移量

4.2 关键方法解析

// 重置所有偏移量为0
reset(): void {this.currentX = 0;this.currentY = 0;this.lastX = 0;this.lastY = 0;
}// 保存当前偏移量到last变量
stash(): void {this.lastX = this.currentX;this.lastY = this.currentY;
}

4.3 使用场景

  • 拖拽操作中的位置偏移计算
  • 手势滑动距离记录
  • 动画过渡位置计算

5. 旋转模型(RotateModel)详解

@Observed
export class RotateModel {public currentRotate: number;public lastRotate: number = 0;public startAngle: number = 20;// ... 其他方法
}

5.1 核心属性说明

属性类型默认值说明
currentRotatenumber0当前旋转角度
lastRotatenumber0上次旋转角度
startAnglenumber20触发旋转的最小角度

5.2 关键方法解析

stash(): void {// 将角度规范化到0-360度范围内let angle = 360;this.lastRotate = this.currentRotate % angle;
}

5.3 使用场景

  • 图片旋转功能
  • 元素角度调整
  • 手势旋转交互

6. 缩放模型(ScaleModel)详解

@Observed
export class ScaleModel {public scaleValue: number;public lastValue: number;public maxScaleValue: number;public extraScaleValue: number;public readonly defaultScaleValue: number = 1;// ... 其他方法
}

6.1 核心属性说明

属性类型默认值说明
scaleValuenumber1.0当前缩放值
lastValuenumber1.0上次缩放值
maxScaleValuenumber1.5最大缩放限制
extraScaleValuenumber0.2额外缩放系数
defaultScaleValuenumber1默认缩放值

6.2 关键方法解析

reset(): void {this.scaleValue = this.defaultScaleValue;this.lastValue = this.scaleValue;
}stash(): void {this.lastValue = this.scaleValue;
}

6.3 使用场景

  • 图片缩放功能
  • 手势捏合缩放
  • 视图大小调整

7. 实践应用

这些模型类通常配合使用,实现复杂的手势交互功能:

// 示例:创建一个支持移动、缩放、旋转的组件
class GestureHandler {private position = new PositionModel();private offset = new OffsetModel();private rotate = new RotateModel();private scale = new ScaleModel();// 处理手势开始onGestureStart() {// 保存初始状态this.offset.stash();this.rotate.stash();this.scale.stash();}// 处理手势变化onGestureChange(dx: number, dy: number, angle: number, scale: number) {// 更新各个模型的值this.offset.currentX += dx;this.offset.currentY += dy;this.rotate.currentRotate = angle;this.scale.scaleValue = scale;}
}

最佳实践建议

  1. 状态管理

    • 使用stash()方法保存状态
    • 使用reset()方法重置状态
    • 及时更新last值以便下次计算
  2. 边界处理

    • 注意缩放的最大/最小限制
    • 处理旋转角度的360度循环
    • 考虑位置和偏移的边界约束
  3. 性能优化

    • 避免频繁创建新的模型实例
    • 合理使用@Observed触发更新
    • 必要时使用防抖/节流处理

通过这些模型的组合使用,可以实现丰富的手势交互功能,如图片查看器、地图操作、可视化编辑器等复杂交互场景。理解这些模型的工作原理,对于开发高质量的HarmonyOS应用至关重要。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/34054.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解读Ant Design X API流式响应和流式渲染的原理

前言 AI是未来世界的趋势,deepseek的出现让在国内构建更多的大模型出现了更多的可能。而从前端出发,Ant design团队最近很有意思,基于这个背景,提供了一套面向构建平台化产品的组件。 本篇结合Ant design AI的XSteam、XRequesta…

CentOS 7 64 安装 Docker

前言 在虚拟机中安装 Docker 是一种常见的测试和开发环境搭建方式。通过在虚拟机上安装 Docker,可以方便地创建和管理容器化应用,同时避免对宿主机系统造成影响。以下是在 CentOS 7 虚拟机中安装 Docker 的详细步骤。 1. 更新系统(可以不操作…

SPI驱动(八) -- SPI_DAC设备驱动程序

文章目录 参考资料:一、编写设备树二、 编写驱动程序三、编写测试APP四、Makefile五、上机实验 参考资料: 参考资料: 内核头文件:include\linux\spi\spi.h内核文档:Documentation\spi\spidevDAC芯片手册:…

Ansible 自动化运维

Ansible架构: 一.部署主机清单 前期环境准备: 管理端: 192.168.60.128 被管理端: client1:192.168.60.129 client2:192.168.60.131 1.所有被管理端配置ssh密钥 (1.免密登陆 2.允许root远程登陆) 脚本如下: #!/bin/bash# 检查 sshpass 是否已安装 if ! command -v ss…

Qt 实现波浪填充的圆形进度显示

话不多说&#xff0c;先上效果图 代码示例&#xff1a; #include <QApplication> #include <QWidget> #include <QPainter> #include <QPropertyAnimation> #include <QTimer> #include <cmath>class WaveProgressBar : public QWidget {…

DQN 玩 2048 实战|第一期!搭建游戏环境(附 PyGame 可视化源码)

视频讲解&#xff1a; DQN 玩 2048 实战&#xff5c;第一期&#xff01;搭建游戏环境&#xff08;附 PyGame 可视化源码&#xff09; 代码仓库&#xff1a;GitHub - LitchiCheng/DRL-learning: 深度强化学习 2048游戏介绍&#xff0c;引用维基百科 《2048》在44的网格上进行。…

星越L_外后视镜使用讲解

目录 1.外后视镜调节 2后视镜折叠 3.后视镜加热 1.外后视镜调节 L控制左边后视镜调节,上下拨动调整视野,一般此镜左右21分,上下55开。 R控制左边后视镜调节,上下拨动调整视野,一般此镜左右13分,上下55开。 2后视镜折叠 车辆解锁自动展开 车辆关闭自动折叠 严寒天气…

2025-03-15 Python深度学习2——Numpy库

文章目录 1 基础1.1 数据类型1.1.1 整型数组与浮点型数组1.1.2 元素同化1.1.3 数组类型转换 1.2 数组维度1.2.1 一维数组与二维数组1.2.2 数组形状变换 2 创建数组2.1 创建指定数组2.2 创建递增数组2.3 创建同值数组2.4 创建随机数组 3 索引3.1 访问数组元素3.1.1 访问向量3.1.…

【Linux-传输层协议TCP】流量控制+滑动窗口+拥塞控制+延迟应答+捎带应答+面向字节流+粘包问题+TCP异常情况+TCP小结

5.流量控制 接收端处理数据的速度是有限的。如果发送端发的太快&#xff0c;导致接收端的缓冲区被打满&#xff0c;这个时候如果发送端继续发送就会造成丢包&#xff0c;继而引起丢包重传等等一系列连锁反应。 因此TCP 支持根据接收端的接收数据的能力来决定发送端发送数据的…

[C语言日寄] qsort函数的练习

【作者主页】siy2333 【专栏介绍】⌈c语言日寄⌋&#xff1a;这是一个专注于C语言刷题的专栏&#xff0c;精选题目&#xff0c;搭配详细题解、拓展算法。从基础语法到复杂算法&#xff0c;题目涉及的知识点全面覆盖&#xff0c;助力你系统提升。无论你是初学者&#xff0c;还是…

C语言每日一练——day_8

引言 针对初学者&#xff0c;每日练习几个题&#xff0c;快速上手C语言。第八天。&#xff08;连续更新中&#xff09; 采用在线OJ的形式 什么是在线OJ&#xff1f; 在线判题系统&#xff08;英语&#xff1a;Online Judge&#xff0c;缩写OJ&#xff09;是一种在编程竞赛中用…

python从邮件中提取链接中的符号为什么会变成amp; 解决办法

在Python中&#xff0c;从邮件中提取链接时&#xff0c;&符号变成&amp;是因为HTML实体编码。HTML使用&amp;表示&&#xff0c;以确保在浏览器中正确显示。 原因 HTML实体编码&#xff1a;&在HTML中有特殊含义&#xff0c;用于表示实体编码的开始。为了避免…

农业电商|基于SprinBoot+vue的农业电商服务系统(源码+数据库+文档)

农业电商服务系统 目录 基于SprinBootvue的农业电商服务系统 一、前言 二、系统设计 三、系统功能设计 5.1系统功能实现 5.2后台模块实现 5.2.1管理员模块实现 5.2.2商家模块实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码…

【JAVA】七、基础知识“if+switch+循环结构”详细讲解~简单易懂!

目录 7、逻辑控制 7.1 分支结构 7.1.1 if 语句 语法格式1 语法格式2 语法格式3 7.1.2 switch语句 基本语法 执行流程 7.2 循环结构 7.2.1 while循环 语法格式 7.2.2 Break 7.2.3 Continue 7.2.4 for循环 语法格式 执行过程 7.2.5 do while循环 语法格式 7.3 …

C# Exe + Web 自动化 (BitComet 绿灯 自动化配置、设置)

BitComet GreenLight,内网黄灯转绿灯 (HighID), 增加p2p连接率提速下载-CSDN博客 前两天写个这个&#xff0c;每次开机关机后要重来一遍很麻烦的索性写个自动化。 先还是按照上面的教程自己制作一遍&#xff0c;留下Luck 以及 路由器相关的 端口记录信息。 &#xff08;因为自…

JumpServer基础功能介绍演示

堡垒机可以让运维人员通过统一的平台对设备进行维护&#xff0c;集中的进行权限的管理&#xff0c;同时也会对每个操作进行记录&#xff0c;方便后期的溯源和审查&#xff0c;JumpServer是由飞致云推出的开源堡垒机&#xff0c;通过简单的安装配置即可投入使用&#xff0c;本文…

sqldef:一款免费的数据库变更管理工具

应用程序的升级通常伴随着数据库表结构的变更&#xff0c;为了维护各种环境的数据库变更&#xff0c;我们通常需要引入 Liquibase 或者 Flyaway 这样的数据库版本控制工具。不过&#xff0c;这类工具通常需要绑定某种编程语言&#xff0c;例如 Java&#xff1b;这次我们介绍一个…

行为模式---状态模式

概念 状态模式是一种行为模式&#xff0c;用于在内部状态改变的时候改变其行为。它的核心思想就是允许一个对象在其内部状态改变的时候改变它的行为。状态模式通过将对象的状态封装成独立的类&#xff0c;并将其行为委托给当前的状态对象&#xff0c;从而使得对象行为随着状态…

1688按图搜索商品(拍立淘)接口的参数说明【附代码实例】

阿里巴巴中国站按图搜索1688商品&#xff08;拍立淘&#xff09; API 返回值说明 item_search_img-按图搜索1688商品&#xff08;拍立淘&#xff09; 1688.item_search_img 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;se…

Linux文件管理练习

1、列出所有账号的账号名 切割显示-cut 作用&#xff1a;cut命令用于按列提取文本内容 格式: cut -d "分隔符" -f列数字 文件名 2、将/etc/passwd中内容按照冒号隔开的第三个字符从大到小排序后输出所有内容 排序显示-sort 作用:sort命令用于对文本内容进行排…