鸿蒙开发系列教程(十五)--gesture 手势事件

gesture 手势事件

手势操作是指在移动设备上使用手指或手势进行与应用程序交互的方式。手势操作可以包括点击、滑动、双击、捏合等动作,用于实现不同的功能和操作。
在这里插入图片描述

gesture 常规手势


参考代码:

@Entry
@Component
struct Test03 {build() {Column() {Text('常规手势').fontSize(28).gesture(//加载单击手势TapGesture().onAction(() => {console.info('单击事件。。。。');}))}.height(200).width(250)}
}

TapGesture 点击手势

指用户在触摸屏幕上进行点击操作时的手势,通常是快速点击屏幕一次。

当用户点击屏幕时,系统会将该操作识别为点击手势,并通知应用程序进行相应的处理。

TapGesture(value?:{count?:number; fingers?:number})

在这里插入图片描述

参考代码:

@Entry
@Component
struct Test03 {@State value: string = "";build() {Column() {Text('请双击').fontSize(30).gesture(// count: 2--双击TapGesture({ count: 2 }).onAction((event: GestureEvent) => {//调取事件对象event//event.fingerList  触发点击的手指数量              //[{"id":1,"globalX":164,"globalY":62.333333333333336,"localX":54,"localY":9.333333333333334}]console.log(`${JSON.stringify(event.fingerList)}`)this.value = JSON.stringify(event.fingerList[0]);}))}.height("100%").width("100")}
}

PanGesture 拖动手势

是一种用于在移动设备上识别用户手指拖动操作的手势。

通过拖动手势,用户可以在屏幕上拖动某个对象,例如移动一个图像、滚动一个列表或调整一个视图的位置。

包括以下几个基本元素:

起始点(起始位置):用户触摸屏幕的初始位置。
移动点(当前位置):用户在屏幕上滑动手指时的当前位置。
移动向量:起始点和移动点之间的向量,表示手指移动的方向和距离。

PanGestureOptions(value?:{ fingers?:number; direction?:PanDirection; distance?:number})
在这里插入图片描述

参考代码:

@Entry
@Component
struct Test03{@State offsetX: number = 0;@State offsetY: number = 0;@State positionX: number = 0;@State positionY: number = 0;build() {Column() {Text('拖动偏移量:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY).fontSize(28).height(200).width(300).padding(20).border({ width: 5 })         .translate({ x: this.offsetX, y: this.offsetY, z: 0 }).gesture(**PanGesture()**.onActionStart((event: GestureEvent) => {console.info('拖动开始');})// 触发拖动手势时调用.onActionUpdate((event: GestureEvent) => {this.offsetX = this.positionX + event.offsetX;this.offsetY = this.positionY + event.offsetY;}).onActionEnd(() => {this.positionX = this.offsetX;this.positionY = this.offsetY;}))}.height(500).width(500)}
}

PinchGesture 捏合手势

通常在触摸屏上使用,涉及使用两个或更多的手指同时向内或向外移动,以缩小或放大屏幕上的内容。当手指向内移动时,被捏合的物体(如图片、网页等)将会被缩小;当手指向外移动时,被捏合的物体将会被放大。

在智能手机和平板电脑上浏览照片、地图、网页等时经常使用捏合手势来实现缩放功能。

PinchGesture(value?:{fingers?:number; distance?:number})
在这里插入图片描述

@Entry
@Component
struct Test03 {build() {Column() {Column() {Text('三指捏合缩放')       }.height(200).width(300).border({ width: 3 }).margin({ top: 100 })// 指定缩放比例//.scale({ x: this.scaleValue, y: this.scaleValue, z: 1 }).gesture(// 指定几指触发的捏合手势PinchGesture({ fingers: 3 }).onActionStart((event: GestureEvent) => {//开始事件})           .onActionUpdate((event: GestureEvent) => {//当捏合手势触发时}).onActionEnd(() => {//事件结束}))}}
}

LongPressGesture 长按手势

是指用户在屏幕上长时间按住一个元素或者某个区域,触发的手势操作。

长按手势通常用于实现某些特定的功能,比如弹出菜单、编辑文本、删除元素等。

长按手势的触发时间通常比较长,根据不同的应用场景,可以设置触发长按手势所需的最小按住时间。

包括以下几个阶段:

按下(Touch Down):用户按住屏幕上一个元素或者某个区域。
按住(Touch Hold):用户持续按住屏幕,一般在这个阶段内可以实现一些操作,比如拖动元素、改变元素的位置等。
触发(Touch Up Inside):用户松开手指,如果在按住阶段内达到某个条件,则会触发相应的操作,比如弹出菜单。

LongPressGesture(value?:{fingers?:number; repeat?:boolean; duration?:number})
在这里插入图片描述

参考代码

@Entry
@Component
struct Test03 {@State count: number = 0;build() {Column() {Text('长按 累加次数:' + this.count).fontSize(28).gesture(// repeat: true 重复触发的LongPressGestureLongPressGesture({ repeat: true }).onAction((event: GestureEvent) => {console.log(`${JSON.stringify(event)}`)// {"repeat":true,"offsetX":0,"offsetY":0,"scale":1,"angle":0,"speed":0,"timestamp":0,"globalX":174,"globalY":16.666666666666668,"localX":33.666666666666664,"localY":16.666666666666668,"pinchCenterX":0,"pinchCenterY":0,"source":0,"pressure":0,"sourceTool":0,"fingerList":[{"id":1,"globalX":174,"globalY":16.666666666666668,"localX":33.666666666666664,"localY":16.666666666666668}],"target":{"area":{"position":{"x":0,"y":0},"globalPosition":{"x":0,"y":0},"width":0,"height":0}}}//每重复一次,累加一次if (event.repeat) {this.count++;}}).onActionEnd(() => {this.count = 0;}))}.height("100%").width("100%")}
}

RotationGesture 旋转手势

用于识别用户在触摸屏上进行旋转操作的手势。在移动设备上,旋转手势通常使用两个手指来执行旋转操作。

在旋转手势中,用户可以用两个手指按住屏幕上的对象,并围绕一个旋转中心点进行旋转动作。

如在地图应用中旋转地图方向,或在图片编辑应用中旋转图像。

当用户进行旋转手势时,系统会根据手指的移动轨迹和角度变化来计算旋转角度,并将其作为旋转手势的输入。开发者可以通过手势识别库或框架来监听和处理旋转手势,以实现相应的功能。

RotationGesture(value?:{fingers?:number; angle?:number})

在这里插入图片描述

  Text('aaaa').rotate({ angle: this.angle }).gesture(RotationGesture().onActionStart((event: GestureEvent) => {       })            .onActionUpdate((event: GestureEvent) => {   }).onActionEnd(() => {        }).onActionCancel(() => { }))
}

SwipeGesture 滑动手势

通过在触摸屏上进行手指滑动操作来执行特定的动作或触发特定的事件。常用于移动应用程序中的页面导航、图片浏览、删除操作等场景。

滑动手势可以分为不同的方向,常见的包括向上滑动、向下滑动、向左滑动和向右滑动。

用户可以在屏幕上滑动手指,当手指的移动方向和距离达到一定的条件时,系统会识别为滑动手势,并根据具体需求执行相应的操作。

滑动手势通常使用在移动设备或触摸屏设备上,通过手指的滑动来完成操作,比如在手机上可以通过向左滑动删除一条消息,在图片浏览应用中可以通过向左滑动切换到下一张图片等。滑动手势的使用可以提高用户体验,使用户能够更自然、直观地与应用程序进行交互。

SwipeGesture(value?:{fingers?:number; direction?:SwipeDirection; speed?:number})
在这里插入图片描述

  Column() {Text("aaaa" )       }.border({ width: 3 }).width(300).height(200)    .rotate({ angle: 30 }).gesture(     SwipeGesture({ direction: SwipeDirection.Vertical })      .onAction((event: GestureEvent) => {}))

组合手势

组合手势由多种单一手势组合而成,通过在GestureGroup中使用不同的GestureMode来声明该组合手势的类型

GestureGroup(mode:GestureMode, gesture:GestureType[])

  • mode:为GestureMode枚举类。用于声明该组合手势的类型。
  • gesture:由多个手势组合而成的数组。用于声明组合成该组合手势的各个手势。

连续识别

GestureMode为Sequence

连续识别组合手势将按照手势的注册顺序识别手势,直到所有的手势识别成功。

当连续识别组合手势中有一个手势识别失败时,所有的手势识别失败。

  Column() {
​        Text(“aaaa”)      
​    }
​    .height(250)
​    .width(300)
​    .gesture(
​      GestureGroup(GestureMode.Sequence, 
​        LongPressGesture({ repeat: true }) 
​          .onAction((event: GestureEvent|undefined) => { //执行代码})
​          .onActionEnd(() => {
​                //执行代码
​          }),
​     
​        PanGesture()
​          .onActionStart(() => {
​                //执行代码
​          })
​          .onActionUpdate((event: GestureEvent|undefined) => {
​               //执行代码
​          })
​          .onActionEnd(() => {
​                //执行代码
​          })
​      )
​    )

并行识别

GestureMode为Parallel。

并行识别组合手势中注册的手势将同时进行识别,直到所有手势识别结束。

并行识别手势组合中的手势进行识别时互不影响。

   Column() {
​      Text(“aaaa”)    
​    }
​    .height(200)
​    .width(250)
​    .gesture(
​      GestureGroup(GestureMode.Parallel,
​        TapGesture({ count: 1 })
​          .onAction(() => {
​               //执行代码
​          }),
​        TapGesture({ count: 2 })
​          .onAction(() => {
​             //执行代码
​          })
​      )
​    )}

互斥识别

GestureMode为Exclusive

互斥识别组合手势中注册的手势将同时进行识别,若有一个手势识别成功,则结束手势识别,

其他所有手势识别失败。

​    Column() {
​      Text('aaa')      
​    }
​    .height(200)
​    .width(250)   
​    .gesture(
​      GestureGroup(GestureMode.Exclusive,
​        TapGesture({ count: 1 })
​          .onAction(() => {        //执行代码
​          }),
​        TapGesture({ count: 2 })
​          .onAction(() => {     //执行代码
​          })
​      )
​    )

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Stable Diffusion 模型下载:ToonYou(平涂卡通)

文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十 下载地址 模型介绍 ToonYou 是一个平涂风格的卡通模型,它的画风独特、光感强烈、画面表现力强、场景结构完整,一张张图犹如动画电影截图,非常值得推…

Python 错误及其解决方法

Python 是一种易于学习的编程语言,但初学者在学习和使用 Python 的过程中难免会遇到一些错误。以下是一些常见的 Python 错误及其解决方法: 1. 语法错误(SyntaxError): python # 错误示例 print("Hello, World!…

React18原理: Fiber架构下的单线程CPU调度策略

概述 React 的 Fiber 架构, 它的整个设计思想就是去参考CPU的调度策略CPU现在都是多核多进程的,重点研究的是 CPU是单核单线程,它是如何调度的?为什么要去研究单线程的CPU? 浏览器中的JS它是单线程的JS 的执行线程和浏览器的渲染GUI 是互斥…

小程序-云开发 获取用户的openid等信息

说明介绍: 小程序云开发功能来获取用户的openid。 一般在我们需要用到用户登录的时候,通常是需要获取微信小程序的openid的,由于微信的限制,一般我们只能通过后台去调微信的接口,来授权获取,增加了后端开发…

fast.ai 深度学习笔记(二)

深度学习 2:第 1 部分第 4 课 原文:medium.com/hiromi_suenaga/deep-learning-2-part-1-lesson-4-2048a26d58aa 译者:飞龙 协议:CC BY-NC-SA 4.0 来自 fast.ai 课程的个人笔记。随着我继续复习课程以“真正”理解它,这…

【Linux】 网络编程套接字

目录 预备知识 网络字节序 网络字节序和主机字节序转换的库函数 socket编程接口 socket常见API sockaddr结构 套接字的种类 预备知识 1.在IP数据包头部中,有两个IP地址,分别叫做源IP地址和目的IP地址。 2.端口号:是传输层协议的内容…

AI大模型学习笔记之四:生成式人工智能(AIGC)是如何工作的?

OpenAI 发布 ChatGPT 已经1年多了,生成式人工智能(AIGC)也已经广为人知,我们常常津津乐道于 ChatGPT 和 Claude 这样的人工智能系统能够神奇地生成文本与我们对话,并且能够记忆上下文情境。 Midjunery和DALLE 这样的AI…

【HTTP】localhost和127.0.0.1的区别是什么?

目录 localhost是什么呢? 从域名到程序 localhost和127.0.0.1的区别是什么? 域名的等级划分 多网站共用一个IP和端口 私有IP地址 IPv6 今天在网上逛的时候看到一个问题,没想到大家讨论的很热烈,就是标题中这个: …

专业130+总分420+厦门大学847信号与系统考研经验厦大信息系统与通信工程,真题,大纲,参考书。

今年很幸运被厦门大学录取,考研专业课847信号与系统130,数二130,总分420,回头看这将近一年的复习,还是有不少经验和大家分享,希望对大家复习有帮助。专业课: 厦门大学847信号与系统在全国各高校…

C语言的字符函数的使用与模拟实现

各位少年,大家好,我是博主那一脸阳光,今天给大家分享字符函数的使用与模拟实现。 前言:如果你想使用一个锤子非常方便,直接使用做好的就行,但是锤子是怎么构成的,你就不知所云了,模拟…

【机器学习】单变量线性回归

文章目录 线性回归模型(linear regression model)损失/代价函数(cost function)——均方误差(mean squared error)梯度下降算法(gradient descent algorithm)参数(parame…

【计算机网络】Web HTTP

Web和HTTP HTTP 超文本传输协议 HyperText Transfer Protocol HTTP使用TCP作为支撑传输协议 由一个客户程序和一个服务器程序实现一些常见名词。。。无状态协议 stateless protocol 不保存关于客户的任何信息非持续/持续链接 non-persistent con…

【书生·浦语大模型实战营】学习笔记1

大模型成为发展通用人工智能的重要途经 专用模型:针对特定任务,一个模型解决一个问题 通用大模型:一个模型应对多种任务、多种模态 书生浦语大模型系列 上海人工智能实验室 轻量级、中量级、重量级 7B 和 123B的轻量级和中量级大模型都是开源…

Educational Codeforces Round 135 (Rated for Div. 2)C. Digital Logarithm(思维)

文章目录 题目链接题意题解代码 题目链接 C. Digital Logarithm 题意 给两个长度位 n n n的数组 a a a、 b b b,一个操作 f f f 定义操作 f f f为, a [ i ] f ( a [ i ] ) a [ i ] a[i]f(a[i])a[i] a[i]f(a[i])a[i]的位数 求最少多少次操作可以使 …

推荐知识付费源码,梦想贩卖机升级版

梦想贩卖机升级版,变现宝吸收了资源变现类产品的许多优势,并剔除了那些无关紧要的元素,使得本产品在运营和变现能力方面实现了质的飞跃。多领域素材资源知识变现营销裂变独立版本。 演示地址:runruncode.com/rjcx/19689.html

UnityShader——01Shader和渲染管线

Shader和渲染管线 什么是Shader Shader中文翻译为着色器,是一种较为短小的程序片段,用于告诉图形硬件如何计算和输出图像,过去由汇编语言编写,现在也可以使用高级语言进行编写。 即,Shader是一种可编程图形管线的算法…

Android:Ionic框架使用实例

Ionic学习 ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。通过使用H5,JS,CSS构建接近原生体验的移动应用程序。 ionic放弃对IOS6和Android4.1以下的版本的支持,提高应用程序的运行效率。 Ionic官网地址: Ionic Framework - The Cross-Pla…

VSCode:替换空行

有时从不同的编辑器拷贝过来的代码会有很多空行,可以通过以下办法进行删除: 1.按CtrlH弹出替换窗口 2.在查找输入框中输入:^\s*(?\r?$)\n 3.点击使用正则表达式 4.点击全部替换

卫星通讯领域FPGA关注技术:算法和图像方面(4)

最近关注的公众号提到了从事移动通信、卫星通讯等领域的FPGA、ASIC、信号处理算法等工程师可能需要关注的技术,有5G NTN、多址技术、低轨通信卫星LEO,以下做了一些基础的调研: 1 5G NTN 来自《5G NTN技术白皮书:天地一体、手机直…

vs用msys2编译安装 gmp

1 下载 1.1下载MSYS2工具 MSYS2 1.2 下载gmp The GNU MP Bignum Library 2 使用windows的msys2命令窗口,有三个msys2命名窗口 mingw64 3 4 命令 pacman -Syu 重启: pacman -Su 安装: pacman -S mingw-w64-x86_64-gcc pacman -S mingw-w64-x86_64-make…