HarmonyOS手势处理

手势处理

手势事件

• 通过不同组件绑定不同手势，设置手势事件响应方式，当手势识别成功，Ark通过事件回调通知手势识别结果

绑定手势的方法

. gesture

• 常规手势绑定方法

.gesture(gestureType,mak?:GestureMask)

. priorityGesture

• 带优先级的绑定方法

.priorityGesture(gestureType,mask?:GestureMask)

• 带优先级的绑定方法，在组件上绑定优先识别手势
• 在默认情况下，当父子组件同时使用gesture，子组件优先识别通过gesture绑定手势
• 当父组件使用priorityGesture绑定与子组件相同手势时，父组件优先通过手势判定
• 例外：长按手势，长按手势是根据长时间的长短决定优先级

.parallelGesture

• 并行手势绑定方法

.parallelGesture(gestureType,mask?:GestureMask)

• 可以在父组件和子组件上同时响应相同的手势
• 在默认情况下，手势事件不是冒泡事件
• 当父子组件绑定相同手势时，就会出现手势竞争，最多只能有一个组件的手势能获得响应
• 当父组件绑定了并行手势parallelGesture时，父子组件可以同时触发，实现类似冒泡的效果

按照手势数量分

单一手势

点击手势(TapGesture)

1. 点击手势支持单次点击和多次点击
2. **count：**声明该点击手势识别次数。默认为1
3. **fingers：**用于触发点击的手指数量，最小值1，最大值10，当配置多指时，如果第一根手指按下300ms以内没有足够的手指按下，则视为无效
4. **事件：**onAction( event ) 手势识别成功回调

长按手势(LongPressGesture)

1. 长按手势用于触发长按事件，有三个可选参数
2. **fingers：**用于声明手势的所需要最少手指数量，最小为1，最大为10，默认1
3. **repeat：**用于声明是否连续触发回调事件（设置为true，长按连续触发）
4. **duration：**用于声明触发长按所需的最短时间，单位ms，默认500
5. 事件：
   • onAction( event )：手势识别成功的回调
   • onActionEnd( event )：手势识别成功，当最后一根手指抬起后触发回调
   • onActionCancel( event )：手势识别成功，接收到触摸取消事件触发回调

拖动手势(PanGesture)

1. 拖动手势用于触发拖动事件，滑动达到最小距离时拖动，手势识别成功有三个参数
2. fingers：手指数量，最小为2，最大为5，默认2
3. direction：声明拖动的手势方向，此枚举值（PanDirection）支持逻辑与和逻辑或运算，默认值ALL
4. distance：用于申明触发拖动的最小识别距离，单位vp，默认5
5. 事件
   • onActionStart(()=>{}) 手势识别成功回调
   • onActionUpdate(()=>{}) 手势移动过程中的回调
   • onActionEnd(()=>{}) 手势识别成功，手指抬起触发回调
   • onActionCancel() 手势识别成功，接收到触摸取消时间触发

捏合手势(PinchGesture)

1. 有两个可选参数

   • fingers：手指数量
   • distance：触发捏合手势的最小距离，默认值为5

2. 事件

   • onActionStart(()=>{ }) 手势识别成功的回调
   • onActionUpdate(()=>{ }) 手势移动过程中的回调
   • onActionEnd(()=>{ }) 手势识别成功，手指抬起时触发
   • onActioncancel( ) 手势识别成功，接收到触摸取消事件触发

3. 代码

   •       Text('这是一个捏合手势').width(200).height(300).border({width:3}).margin({ top:100 })//scale 缩放.scale({x:this._offset,y:this._offset}).gesture(PinchGesture().onActionStart(() => {console.log(`>>>捏合手势开始触发`)}).onActionUpdate((event) => {//调整缩放比例//event.scale 这是比例值 大于0console.log(`>>>>${event.scale}`)this._offset = this._offset * event.scaleif(this._offset <= 0.5){this._offset= 0.5}}).onActionEnd(() => {console.log(`>>>>捏合手势结束`)}))
     

旋转手势(RotationGesture)

1. 有两个可选参数

   • fingers：用于声明触发旋转手势需要最少手指数量为2，最大为5，默认为2
   • angle：选择手势最小改变度数，单位deg

2. 事件

   • onActionStart( )：手势识别成功的回调
   • onActionUpdate( )：手势移动过程的回调
   • onActionEnd( )：手势识别成功，手指抬起触发

3. 代码

   •       Text('这是旋转手势触发对象').width(200).height(300).border({width:1})//组件的旋转角度，x,y 旋转轴的坐标 angle:旋转角度.rotate({angle:this._DEG}).gesture(RotationGesture().onActionStart(() => {console.log('>>>>旋转手势被触发')}).onActionUpdate((event) => {//用于RotationGesture手势触发场景,表示旋转角度console.log(`>>>>${event.angle}`)this._DEG = event.angle}))
     

滑动手势(SwiperGesture)

1. 当滑动速度大于100vp/s时，可识别成功

2. 有三个参数：

   • **fingers：**用于声明触滑动手势最小的手指数量，最小值为1，最大值为10，默认1
   • **direction：**用于声明触发滑动手势的方向，枚举值支持&& 和 ||
   • speed：用于声明触发滑动最小滑动识别速度，vp/s 默认值100

3. 事件

   • onAction：swiper手势识别成功回调

4. 代码

   •   Column(){Text(`滑动手势的速度:${this.speed}`)Text(`滑动手势的角度:${this.rotateAngle}`)}.border({ width: 3 }).width(300).height(200)// rotate：组的旋转，angle角度.rotate({ angle:this.rotateAngle }).gesture(SwipeGesture({ fingers:2 }).onAction((event) => {console.log(`>>>>发生了滑动`)if(event){/** 滑动手势的速度* 手指相对于组件原始区域滑动的评价速度** */this.speed = event.speed/** 滑动角度* 即两个手指间的线段与水平方向的夹角变化的度数** */this.rotateAngle = event.angle}}))
     

组合手势

• 组合手势由多种单一手势组合而成，通过GestureGroup中使用不同的GestureMode来声明该组合手势的类型
• 顺序识别，并行识别，互斥识别
• GestureGroup
  • mode：手势识别模式，顺序识别，并行识别，互斥识别
    • Sequence 顺序识别
    • Parallel 并行识别
    • Exclusive 互斥识别
  • guesture：手势类型 6种单一手势

顺序识别

• 组合手势按照手势的注册顺序识别手势，直到所有手势识别成功。
• 当顺序识别由一个手势识别失败，后续手势均失败。
• 在顺序识别手势组中仅有最后一个手势可以响应onActionEnd

Column(){Text('组合手势\n' + '长按手势:' + this.count + '\n拖动手势偏移' +'\n x:' + this.x + '\ny:' + this.y).fontSize(28)
}
.width(250)
.height(300)
.margin(10)
.border({width:1,style:this.border_style
})
//偏移量
.translate({x:this.x,y:this.y
})
/** 一个有长按手势与拖动手势结合的组合手势** */
//绑定手势
.gesture(//组合手势GestureGroup(//声明组合手势类型为顺序识别GestureMode.Sequence,//第一个触发的手势为长按手势，且长按手势可以多次相应LongPressGesture( { repeat: true } ).onAction((event) => {this.count++}),//当长按之后进行拖动，拖动手势将被触发PanGesture().onActionStart(() => {this.border_style = BorderStyle.Dashed}).onActionUpdate((event) => {this.x = this.offset_x + event.offsetXthis.y = this.offset_y + event.offsetY}).onActionEnd(() => {this.offset_x = this.xthis.offset_y = this.ythis.border_style = BorderStyle.Solid})).onCancel(() => {//顺序手势没有全部执行则触发console.log('顺序手势结束')})
)

并行识别

• 并行识别组合手势中注册的手势将同时进行识别，直到所有手势识别结束
• 并行识别手势组合中的手势进行识别互不影响

Column(){Text('并行事件\n' + '并行事件1:' + this.count1 +'\n 并行事件2:' + this.count2).fontSize(28)
}
.height(500)
.width('100%')
.border({width:1
})
.justifyContent(FlexAlign.Center)
//绑定手势
.gesture(//并行识别的组合手势GestureGroup(GestureMode.Parallel,//单击手势TapGesture({ count:1 }).onAction(() => {this.count1++}),//双击手势TapGesture({ count:2 }).onAction(() => {this.count2++}))
)

互斥识别

• 互斥识别将组合手势中注册的手势同时识别
• 若有一个手势识别成功，则结束手势识别，其他所有手势识别失败

Column(){Text('互斥事件\n' + '互斥事件1:' + this.count1 +'\n 互斥事件2:' + this.count2).fontSize(28)
}
.height(500)
.width('100%')
.border({width:1
})
.justifyContent(FlexAlign.Center)
//绑定手势
.gesture(//并行识别的组合手势GestureGroup(GestureMode.Exclusive,//为什么？因为点击事件以两次点击间隔时间// 是否大于300ms为识别界限，// 如果小于300ms那么继续计入到点击次数中//如果大于300ms触发对应事件//双击手势TapGesture({ count:4 }).onAction(() => {this.count2++}),//单击手势TapGesture({ count:3 }).onAction(() => {this.count1++}),)
)