HarmonyOS/OpenHarmony(Stage模型)应用开发单一手势(二)

三、拖动手势(PanGesture)
.PanGestureOptions(value?:{ fingers?:number; direction?:PanDirection; distance?:number})
拖动手势用于触发拖动手势事件,滑动达到最小滑动距离(默认值为5vp)时拖动手势识别成功,拥有三个可选参数:
fingers:非必选参数,用于声明触发拖动手势所需要的最少手指数量,最小值为1,最大值为10,默认值为1。
direction:非必选参数,用于声明触发拖动的手势方向,此枚举值支持逻辑与(&)和逻辑或(|)运算。默认值为Pandirection.All。
distance:非必选参数,用于声明触发拖动的最小拖动识别距离,单位为vp,默认值为5。
以在Text组件上绑定拖动手势为例,可以通过在拖动手势的回调函数中修改组件的布局位置信息来实现组件的拖动:

// xxx.ets
@Entry
@Component
struct Index {@State offsetX: number = 0;@State offsetY: number = 0;@State positionX: number = 0;@State positionY: number = 0;build() {Column() {Text('PanGesture Offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY).fontSize(28).height(200).width(300).padding(20).border({ width: 3 })// 在组件上绑定布局位置信息.translate({ x: this.offsetX, y: this.offsetY, z: 0 }).gesture(// 绑定拖动手势PanGesture().onActionStart((event: GestureEvent) => {console.info('Pan start');})// 当触发拖动手势时,根据回调函数修改组件的布局位置信息.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(200).width(250)}
}

HarmonyOS/OpenHarmony(Stage模型)应用开发单一手势(二)-开源基础软件社区


四、捏合手势(PinchGesture)
.PinchGesture(value?:{fingers?:number; distance?:number})
捏合手势用于触发捏合手势事件,触发捏合手势的最少手指数量为2指,最大为5指,最小识别距离为3vp,拥有两个可选参数:
fingers:非必选参数,用于声明触发捏合手势所需要的最少手指数量,最小值为2,最大值为5,默认值为2。
distance:非必选参数,用于声明触发捏合手势的最小距离,单位为vp,默认值为3。
以在Column组件上绑定三指捏合手势为例,可以通过在捏合手势的函数回调中获取缩放比例,实现对组件的缩小或放大:

// xxx.ets
@Entry
@Component
struct Index {@State scaleValue: number = 1;@State pinchValue: number = 1;@State pinchX: number = 0;@State pinchY: number = 0;build() {Column() {Column() {Text('PinchGesture scale:\n' + this.scaleValue)Text('PinchGesture center:\n(' + this.pinchX + ',' + this.pinchY + ')')}.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) => {console.info('Pinch start');})// 当捏合手势触发时,可以通过回调函数获取缩放比例,从而修改组件的缩放比例.onActionUpdate((event: GestureEvent) => {this.scaleValue = this.pinchValue * event.scale;this.pinchX = event.pinchCenterX;this.pinchY = event.pinchCenterY;}).onActionEnd(() => {this.pinchValue = this.scaleValue;console.info('Pinch end');}))}}
}

HarmonyOS/OpenHarmony(Stage模型)应用开发单一手势(二)-开源基础软件社区

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

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

相关文章

学习Bootstrap 5的第一天

目录 Bootstrap 简介 什么是 Bootstrap 5? Bootstrap5 与3 & 4的对比 总体对比: 具体对比: 起源 为什么要使用 Bootstrap? Bootstrap 5 包含的内容 Bootstrap5 实例 Bootstrap5 安装使用 使用 Bootstrap5 CDN 国内…

javacv 基础04-读取mp4,avi等视频文件并截图保存图片到本地

javacv 读取mp4,avi等视频文件并截图保存图片到本地 代码如下: package com.example.javacvstudy;import org.bytedeco.javacv.FFmpegFrameGrabber; import org.bytedeco.javacv.Frame; import org.bytedeco.javacv.Java2DFrameConverter;import javax.imageio.Im…

画流程图都可以用哪些工具?

在日常生活中,我相信我们很多人都看到过流程图。对于设计师来说,它还需要涉及流程图来反映用户的旅程和交互方式。那么你知道哪些流行的流程图设计软件呢?作为高级设计师,我今天推荐10款流程图设计软件。你可以和我一起读这篇文章…

YOLOv5算法改进(12)— 替换主干网络之Swin Transformer

前言:Hello大家好,我是小哥谈。Swin Transformer是一种基于Transformer的深度学习模型,它在视觉任务中表现出色。与之前的Vision Transformer(ViT)不同,Swin Transformer具有高效和精确的特性,并…

ArcGIS Maps SDK for JS(一):概述与使用

文章目录 1 概述2 如何使用ArcGIS Maps SDK for JavaScript2.1 AMD 模块与 ES 模块2.2 AMD 模块和 ES 模块比较 3 几种安装方式3.1 通过 ArcGIS CDN 获取 AMD 模块3.2 通过 NPM 运行 ES 模块3.3 通过 CDN 获取 ES 模块3.4 本地构建 ES3.5 本地构建 AMD 3 VSCode下载与安装2.1 下…

Qt自定义标题栏

一、创建项目 最终项目文件结构如下 “iconfont.tff”的使用方式见如下博客,用于更改图标颜色Qt更改图标颜色_怎么追摩羯座的博客-CSDN博客 二、MyTitleBar.pro #------------------------------------------------- # # Project created by QtCreator 2023-08-2…

Javase | IO流

目录: 1.输入 (Intput/Read)2.输出 (Output/Write)3.IO4.IO流5.IO流的分类:5.1 分类总述5.2 按照 “流的方向” 进行分类5.3 按照 “读取数据的方式” 进行分类 6.IO包下要重点掌握的流:6.1 文件专属 (流)6.2 转换流 ( 将字节流转换为字符流 …

H.264视频编码推荐的分辨率和码率配置表

Video Encoding Settings for H.264 Excellence 针对H.264编码格式,根据不同分辨率,推荐其对应的码率配置关系如下图所示: 如下为上限,超过这个上限再增加码率基本无太大意义!根据业务场景、帧率,建议码率…

小文智能GPT助手介绍

如何使用小文交互的GPT助手,让AI更加智能,适用更多场景? 在小文智能最新推出的4.0版本,有一个新功能,叫做GPT助手。GPT助手,顾名思义,即在小文智能的场景中,接入ChatGPT&#xff0c…

详解vue3中ref和reactive用法和区别

vue3中ref和reactive区别 1、前言2、基本用法2.1 ref2.2 reactive 3、ref和reactive定义数组对比3.1 ref定义数组3.1 reactive定义数组 4、ref 和reactive的区别 1、前言 ref和reactive是Vue3中用来实现数据响应式的API,一般情况下,ref定义基本数据类型…

重磅OpenAI发布ChatGPT企业版本

8月29日凌晨,Open AI官网发布ChatGPT企业版本! 企业版简介: ChatGPT企业版提供企业级安全和隐私、无限的高速 GPT-4 访问、用于处理更长输入的更长上下文窗口、高级数据分析功能、自定义选项等等。人工智能可以协助和提升我们工作生活的各个…

python爬虫—requests

一、安装 pip install requests 二、基本使用 1、基本使用 类型 : models.Response r.text : 获取网站源码 r.encoding :访问或定制编码方式 r.url :获取请求的 url r.content :响应的字节类型 r.status_code :响应…