HarmonyOS手势处理

手势处理

手势事件

• 通过差别组件绑定差别手势，设置手势事件响应方式，当手势辨认成功，Ark通过事件回调通知手势辨认效果
  

绑定手势的方法

. gesture

• 通例手势绑定方法
  

1. .gesture(gestureType,mak?:GestureMask)

复制代码

. priorityGesture

• 带优先级的绑定方法
  

1. .priorityGesture(gestureType,mask?:GestureMask)

复制代码

• 带优先级的绑定方法，在组件上绑定优先辨认手势
  
• 在默认环境下，当父子组件同时使用gesture，子组件优先辨认通过gesture绑定手势
  
• 当父组件使用priorityGesture绑定与子组件相同手势时，父组件优先通过手势判断
  
• 破例：长按手势，长按手势是根据长时间的黑白决定优先级
  

.parallelGesture

• 并行手势绑定方法
  

1. .parallelGesture(gestureType,mask?:GestureMask)

复制代码

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

按照手势数量分

单一手势

点击手势(TapGesture)

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

长按手势(LongPressGesture)

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

拖动手势(PanGesture)

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

捏合手势(PinchGesture)

• 有两个可选参数
  
  
  
  • fingers：手指数量
    
  • distance：触发捏合手势的最小距离，默认值为5
    
  
  
• 事件
  
  
  
  • onActionStart(()=>{ }) 手势辨认成功的回调
    
  • onActionUpdate(()=>{ }) 手势移动过程中的回调
    
  • onActionEnd(()=>{ }) 手势辨认成功，手指抬起时触发
    
  • onActioncancel( ) 手势辨认成功，吸收到触摸取消事件触发
    
  
  
• 代码
  
  
  
  • 1.       Text('这是一个捏合手势')
    2.           .width(200)
    3.           .height(300)
    4.           .border({
    5.             width:3
    6.           })
    7.           .margin({ top:100 })
    8.           //scale 缩放
    9.           .scale({
    10.             x:this._offset,
    11.             y:this._offset
    12.           })
    13.           .gesture(
    14.             PinchGesture()
    15.               .onActionStart(() => {
    16.                 console.log(`>>>捏合手势开始触发`)
    17.               })
    18.               .onActionUpdate((event) => {
    19.                 //调整缩放比例
    20.                 //event.scale 这是比例值 大于0
    21.                 console.log(`>>>>${event.scale}`)
    22.                 this._offset = this._offset * event.scale
    23.                 if(this._offset <= 0.5){
    24.                   this._offset= 0.5
    25.                 }
    26.   
    27.               })
    28.               .onActionEnd(() => {
    29.                 console.log(`>>>>捏合手势结束`)
    30.               })
    31.   
    32.           )

    复制代码
  
  

旋转手势(RotationGesture)

• 有两个可选参数
  
  
  
  • fingers：用于声明触发旋转手势需要最少手指数量为2，最大为5，默认为2
    
  • angle：选择手势最小改变度数，单位deg
    
  
  
• 事件
  
  
  
  • onActionStart( )：手势辨认成功的回调
    
  • onActionUpdate( )：手势移动过程的回调
    
  • onActionEnd( )：手势辨认成功，手指抬起触发
    
  
  
• 代码
  
  
  
  • 1.       Text('这是旋转手势触发对象')
    2.       .width(200)
    3.       .height(300)
    4.       .border({
    5.         width:1
    6.       })
    7.       //组件的旋转角度，x,y 旋转轴的坐标 angle:旋转角度
    8.       .rotate({
    9.         angle:this._DEG
    10.       })
    11.       .gesture(
    12.         RotationGesture()
    13.           .onActionStart(() => {
    14.             console.log('>>>>旋转手势被触发')
    15.           })
    16.           .onActionUpdate((event) => {
    17.             //用于RotationGesture手势触发场景,表示旋转角度
    18.             console.log(`>>>>${event.angle}`)
    19.             this._DEG = event.angle
    20.           })
    21.       )

    复制代码
  
  

滑动手势(SwiperGesture)

• 当滑动速度大于100vp/s时，可辨认成功
  
• 有三个参数：
  
  
  
  • **fingers：**用于声明触滑动手势最小的手指数量，最小值为1，最大值为10，默认1
    
  • **direction：**用于声明触发滑动手势的方向，枚举值支持&& 和 ||
    
  • speed：用于声明触发滑动最小滑动辨认速度，vp/s 默认值100
    
  
  
• 事件
  
  
  
  • onAction：swiper手势辨认成功回调
    
  
  
• 代码
  
  
  
  • 1.   Column(){
    2.       Text(`滑动手势的速度:${this.speed}`)
    3.       Text(`滑动手势的角度:${this.rotateAngle}`)
    4.   
    5.     }
    6.     .border({ width: 3 })
    7.     .width(300)
    8.     .height(200)
    9.   // rotate：组的旋转，angle角度
    10.     .rotate({ angle:this.rotateAngle })
    11.     .gesture(
    12.       SwipeGesture({ fingers:2 })
    13.         .onAction((event) => {
    14.           console.log(`>>>>发生了滑动`)
    15.           if(event){
    16.             /*
    17.              * 滑动手势的速度
    18.              * 手指相对于组件原始区域滑动的评价速度
    19.              *
    20.              * */
    21.             this.speed = event.speed
    22.             /*
    23.              * 滑动角度
    24.              * 即两个手指间的线段与水平方向的夹角变化的度数
    25.              *
    26.              * */
    27.             this.rotateAngle = event.angle
    28.   
    29.           }
    30.         })
    31.     )

    复制代码
  
  

组合手势

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

顺序辨认

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

1. Column(){
2.   Text(
3.     '组合手势\n' + '长按手势:' + this.count + '\n拖动手势偏移' +
4.       '\n x:' + this.x + '\ny:' + this.y
5.   )
6.     .fontSize(28)
7. }
8. .width(250)
9. .height(300)
10. .margin(10)
11. .border({
12.   width:1,
13.   style:this.border_style
14. })
15. //偏移量
16. .translate({
17.   x:this.x,
18.   y:this.y
19. })
20. /*
21. * 一个有长按手势与拖动手势结合的组合手势
22. *
23. * */
24. //绑定手势
25. .gesture(
26.   //组合手势
27.   GestureGroup(
28.     //声明组合手势类型为顺序识别
29.     GestureMode.Sequence,
30.     //第一个触发的手势为长按手势，且长按手势可以多次相应
31.     LongPressGesture( { repeat: true } )
32.       .onAction((event) => {
33.         this.count++
34.       }),
35.     //当长按之后进行拖动，拖动手势将被触发
36.     PanGesture()
37.       .onActionStart(() => {
38.         this.border_style = BorderStyle.Dashed
39.       })
40.       .onActionUpdate((event) => {
41.         this.x = this.offset_x + event.offsetX
42.         this.y = this.offset_y + event.offsetY
43.       })
44.       .onActionEnd(() => {
45.         this.offset_x = this.x
46.         this.offset_y = this.y
47.         this.border_style = BorderStyle.Solid
48.       })
49.   )
50.     .onCancel(() => {
51.       //顺序手势没有全部执行则触发
52.       console.log('顺序手势结束')
53.     })
54. )

复制代码

并行辨认

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

1. Column(){
2.   Text('并行事件\n' + '并行事件1:' + this.count1 +
3.     '\n 并行事件2:' + this.count2
4.   )
5.     .fontSize(28)
6. }
7. .height(500)
8. .width('100%')
9. .border({
10.   width:1
11. })
12. .justifyContent(FlexAlign.Center)
13. //绑定手势
14. .gesture(
15.   //并行识别的组合手势
16.   GestureGroup(
17.     GestureMode.Parallel,
18.     //单击手势
19.     TapGesture({ count:1 })
20.       .onAction(() => {
21.         this.count1++
22.       }),
23.     //双击手势
24.     TapGesture({ count:2 })
25.       .onAction(() => {
26.         this.count2++
27.       })
28.   )
29. )

复制代码

互斥辨认

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

1. Column(){
2.   Text('互斥事件\n' + '互斥事件1:' + this.count1 +
3.     '\n 互斥事件2:' + this.count2
4.   )
5.     .fontSize(28)
6. }
7. .height(500)
8. .width('100%')
9. .border({
10.   width:1
11. })
12. .justifyContent(FlexAlign.Center)
13. //绑定手势
14. .gesture(
15.   //并行识别的组合手势
16.   GestureGroup(
17.     GestureMode.Exclusive,
18.     //为什么？因为点击事件以两次点击间隔时间
19.     // 是否大于300ms为识别界限，
20.     // 如果小于300ms那么继续计入到点击次数中
21.     //如果大于300ms触发对应事件
22.     //双击手势
23.     TapGesture({ count:4 })
24.       .onAction(() => {
25.         this.count2++
26.       }),
27.     //单击手势
28.     TapGesture({ count:3 })
29.       .onAction(() => {
30.         this.count1++
31.       }),
32.   )
33. )

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。