【木棉花】学习笔记——ArkUI手势处理(eTS) 原创 精华

木棉花沈泳鑫
发布于 2022-1-30 22:26
浏览
2收藏

春节不停更,此文正在参加「星光计划-春节更帖活动」

前言

在应用中,我们可以用点击、双击、长按等等的方式去操作一个应用,那这些点击、双击、长按就是我们所说的手势处理。当然手势处理也不仅仅是只有这三种,而且我们还可以将这些基础手势组合起来成为一个组合手势。

正文

TapGesture

这是一个点击手势,支持单次点击和多次点击。

参数名称 默认值 参数描述
count?:number 1 识别的连续点击次数。
fingers?:number 1 触发点击的最少手指数,最小为1指, 最大为10指。

而在该点击手势中,只有一个事件回调函数,那就是onAction((event?: GestureEvent) => void),当手势识别成功时回调该函数。

      Text('请双击')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .gesture(
          TapGesture({count:2})
            .onAction(()=>{
              console.info('TapGesture回调成功')
            })
        )

双击文本之后呢,就会在输出控制台输出 TapGesture回调成功 这样子的一句提示。

LongPressGesture

LongPressGesture是一个长按手势。

参数名称 默认值 参数描述
fingers?:number 1 触发长按的最少手指数,最小为1指, 最大取值为10指。
repeat?:boolean false 是否连续触发事件回调。
duration?:number 500 最小触发长按的时间,单位为毫秒(ms)。

在长按手势中的回调函数就比较多一些了。

回调函数 功能藐视
onAction((event?: GestureEvent) => void) 手势识别成功回调。
onActionEnd((event?: GestureEvent) => void) 手势识别成功,手指抬起后触发回调。
onActionCancel(event: () => void) 手势识别成功,接收到触摸取消事件触发回调。

我们可以根据这个手势来写一个text来记录长按文本的一个时间

      Text('长按了'+this.presstime.toString()+'ms')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .gesture(
          LongPressGesture({repeat:true,duration:100})
            .onAction(()=>{
              this.presstime+=100
            })
            .onActionEnd(()=>{
              this.presstime = 0
              console.info("手指抬起")
            })
            .onActionCancel(()=>{
              console.info('事件取消')
            })
        )

PanGesture

PanGesture是一个平移手势。

参数名称 默认值 参数描述
fingers?:number 1 触发长按的最少手指数,最小为1指, 最大取值为10指。
direction?:PanDirection All 设置滑动方向,此枚举值支持逻辑与和逻辑或运算。
distance?:number 5.0 最小滑动识别距离,单位为vp。
回调函数 功能藐视
onActionStart((event?: GestureEvent) => void) 手势识别成功回调。
onActionUpdate((event?: GestureEvent) => void) 手势移动过程中回调。
onActionEnd((event?: GestureEvent) => void) Pan手势识别成功,手指抬起后触发回调。
onActionCancel(event: () => void) 手势识别成功,接收到触摸取消事件触发回调。

根据可平移手势,我们就可以做出来一个可以平移的文本。

Text('可平移文本')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .margin(30)
        .translate({x:this.offsetX,y:this.offsetY})
        .gesture(
          PanGesture({direction:(PanDirection.Horizontal|PanDirection.Vertical)})
            .onActionStart(()=>{
              console.info('pan start')
            })
            .onActionUpdate((event:GestureEvent)=>{
              this.offsetX = event.offsetX
              this.offsetY = event.offsetY
            })
            .onActionEnd(()=>{
              this.offsetX = 0
              this.offsetY = 0
            })
        )

我在上面平移手势中是设置可以水平或者是竖直平移,和设置任何方向都可以平移是相似的。

PinchGesture

PinchGesture是一个捏合手势。在这个捏合手势中,我们就可以去利用捏合手势去改变一张图片或者其他组件的大小。

参数名称 默认值 参数描述
fingers?:number 2 触发捏合的最少手指数, 最小为2指,最大为5指。
distance?:number 3.0 最小识别距离,单位为vp。
回调函数 功能藐视
onActionStart((event?: GestureEvent) => void) 手势识别成功回调。
onActionUpdate((event?: GestureEvent) => void) 手势移动过程中回调。
onActionEnd((event?: GestureEvent) => void) Pinch手势识别成功,手指抬起后触发回调。
onActionCancel(event: () => void) 手势识别成功,接收到触摸取消事件触发回调。

那我们就写一个程序去通过捏合手势去放大或者缩小PinchGesture这个文本。

Text('PinchGesture')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .margin(30)
        .scale({x:this.scale,y:this.scale})
        .gesture(
          PinchGesture()
            .onActionStart(()=>{
              console.info('Pinch start')
            })
            .onActionUpdate((event:GestureEvent)=>{
              this.scale = event.scale
            })
            .onActionEnd(()=>{
              console.info('Pinch end')
            })
        )

不过由于电脑模拟器只有一个鼠标,但是要实现捏合手势需要至少两根手指,所以这个功能就需要在真机上去查看了。

RotationGesture

RotationGesture是一个旋转手势。当然要实现一个旋转手势也是最少是需要两根手指的。

参数名称 默认值 参数描述
fingers?:number 2 触发捏合的最少手指数, 最小为2指,最大为5指。
angle?:number 1.0 触发旋转手势的最小改变度数,单位为度数。
回调函数 功能藐视
onActionStart((event?: GestureEvent) => void) Rotation手势识别成功回调。
onActionUpdate((event?: GestureEvent) => void) Rotation手势移动过程中回调。
onActionEnd((event?: GestureEvent) => void) Rotation手势识别成功,手指抬起后触发回调。
onActionCancel(event: () => void) Rotation手势识别成功,接收到触摸取消事件触发回调。

那我们就在下面的程序中去实现一个用两根手指去旋转,使得RotationGesture文本也旋转。

Text('RotationGesture')
        .fontSize(45)
        .fontWeight(FontWeight.Bold)
        .margin(30)
        .rotate({angle:this.angle})
        .gesture(
          RotationGesture()
            .onActionStart(() => {
              console.log('Rotation start')
            })
            .onActionUpdate((event: GestureEvent) => {
              this.angle = event.angle
            })
            .onActionEnd(() => {
              console.log('Rotation end')
            })
        )

当然我们也可以利用以上的基础手势去组成一个组合手势,但这里就不予赘述了。


更多资料请关注我们的项目 :Awesome-HarmonyOS_木棉花

本项目会长期更新 ,希望随着鸿蒙一同成长变强的既有我们,也有正在看着这个项目的你。明年3月,深大校园内的木棉花会盛开,那时,鸿蒙也会变的更好,愿这花开,有你我的一份。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
MyEvent.rar 115.77K 23次下载
已于2022-1-30 22:26:52修改
5
收藏 2
回复
举报
回复
    相关推荐