ArkTS开发系列之事件(2.8.2手势事件)

上篇回顾:ArkTS开发系列之事件(2.8.1触屏、键鼠、焦点事件)

本篇内容:ArkTS开发系列之事件(2.8.2手势事件)

一、绑定手势方法

1. 常规手势绑定方法

 Text('手势').fontSize(44)
        .gesture(TapGesture().onAction((event) => {
          console.error('event: ' + JSON.stringify(event))
        }))

2. 带优先级的手势绑定方法

  • 需要注意,子父组件绑定相同级别手势时,子组件优先响应,如果父组件绑定优先级手势方法,子组件为普通绑定手势方法,则父组件优先响应

      .priorityGesture(TapGesture().onAction((event)=>{
        console.error('parentGesture: ' + JSON.stringify(event))
      }))
    

3. 并行手势绑定方法

  • 当父组件绑定此手势方法时,父子组件可同时响应手势

      .parallelGesture(TapGesture().onAction((event)=>{
        console.error('parent event: ' + JSON.stringify(event))
      }))
    

二、单一手势

1. 点击手势(tapGesture)

      Text('手势').fontSize(44)
        .gesture(TapGesture().onAction((event) => {
          console.error('event: ' + JSON.stringify(event))
        }))

2. 长按手势(longPressGesture)

LongPressGesture(value?:{fingers?:number; repeat?:boolean; duration?:number})
  • fingers :触发最少手指数,默认1

  • repeat 是否连续触发 默认false

  • duration 长按多久触发,默认500

    Text('长按手势').fontSize(55)
    .gesture(
    LongPressGesture({fingers: 1, repeat: true, duration: 300})//fingers :触发最少手指数,默认1 repeat 是否连续触发 默认false duration 长按多久触发,默认500
    .onAction(event=>{
    console.error('longPress: ' + JSON.stringify(event))
    })
    )

3. 拖动手势(PanGesture)

PanGesture(value?:{ fingers?:number; direction?:PanDirection; distance?:number})
  • fingers: 触发手势最少手指数,默认1

  • direction:触发手势方向,默认值Pandirection.All

  • distance:触发手势的最少距离,单位为vp,默认5vp

  • 有点类似于onTouch事件

    Text('拖动手势').fontSize(44)
          .gesture(
            PanGesture()
              .onActionStart(
                event => {
                  console.error('Pan start: ' + JSON.stringify(event))
                }
              )
              .onActionUpdate(
                event => {
                  console.error('Pan update: ' + JSON.stringify(event))
                }
              )
              .onActionEnd(
                event => {
                  console.error('Pan end: ' + JSON.stringify(event))
                }
              )
              .onActionCancel(
                () => {
                  console.error('Pan cancel: ')
                }
              )
          )
    

4. 撮合手势(PinchGesture)

PinchGesture(value?:{fingers?:number; distance?:number})
  • fingers: 触发手势最少手指数,默认2, 最大值为5

  • distance:触发手势的最少距离,单位为vp,默认5vp

        Text('撮合手势').fontSize(44)
          .gesture(
            PinchGesture()
              .onActionStart(
                event => {
                  console.error('Pinch start: ' + JSON.stringify(event))
                }
              )
              .onActionUpdate(
                event => {
                  console.error('Pinch update: ' + JSON.stringify(event))
                }
              )
              .onActionEnd(
                event => {
                  console.error('Pinch end: ' + JSON.stringify(event))
                }
              )
              .onActionCancel(
                () => {
                  console.error('Pinch cancel: ')
                }
              )
          )
    

5. 旋转手势(RotationGesture)

RotationGesture(value?:{fingers?:number; angle?:number})
  • fingers: 触发手势最少手指数,默认2, 最大值为5

  • angle: 触发手势的最小改变度数,单位是deg,默认为1deg

    Text().fontSize(44)
    .gesture(
    RotationGesture({fingers:2})
    .onActionStart(
    event => {
    console.error('Rotation start: ' + JSON.stringify(event))
    }
    )
    .onActionUpdate(
    event => {
    console.error('Rotation update: ' + JSON.stringify(event))
    }
    )
    .onActionEnd(
    event => {
    console.error('Rotation end: ' + JSON.stringify(event))
    }
    )
    .onActionCancel(
    () => {
    console.error('Rotation cancel: ')
    }
    )
    )

6. 滑动手势(SwipeGesture)

SwipeGesture(value?:{fingers?:number; direction?:SwipeDirection; speed?:number})
  • fingers: 触发手势最少手指数,默认1, 最大值为10

  • direction: 触发手势的方向默认值是 SwipeDirection.All

  • speed: 触发手势的最小滑动速度,单位为vp/s,默认值为100vp/s

      .gesture(
        SwipeGesture({ direction: SwipeDirection.Vertical })
          .onAction(event => {
            console.error('Swipe : ' + JSON.stringify(event))
          })
      )
    

三、组合手势

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

mode: 声明组合手势的类型
gesture: 手势数组

1. 顺序组合

    .gesture(
      GestureGroup(GestureMode.Sequence,
        SwipeGesture({ direction: SwipeDirection.Vertical })
          .onAction(event => {
            console.error('Swipe : ' + JSON.stringify(event))
          }),
        LongPressGesture()
          .onAction(event => {
            console.error('longPress : ' + JSON.stringify(event))
          })
      )
    )

2. 并行组合

    .gesture(
      GestureGroup(GestureMode.Parallel,
        SwipeGesture({ direction: SwipeDirection.Vertical })
          .onAction(event => {
            console.error('Swipe : ' + JSON.stringify(event))
          }),
        LongPressGesture()
          .onAction(event => {
            console.error('longPress : ' + JSON.stringify(event))
          })
      )
    )

3. 互斥组合

    .gesture(
      GestureGroup(GestureMode.Exclusive,
        SwipeGesture({ direction: SwipeDirection.Vertical })
          .onAction(event => {
            console.error('Swipe : ' + JSON.stringify(event))
          }),
        LongPressGesture()
          .onAction(event => {
            console.error('longPress : ' + JSON.stringify(event))
          })
      )
    )
相关推荐
乐吾乐科技几秒前
【国产开源可视化引擎Meta2d.js】快速上手
开发语言·前端·javascript·开源·编辑器·数据可视化·大屏端
草样的年华4 分钟前
三维地图Cesium中,如何监听地图点击事件,实现在实体上面鼠标右击时做处理。
前端·cesium·三维地图
程序员微木9 分钟前
【ajax实战03】拦截器
前端·ajax·okhttp
云草桑27 分钟前
WPF UI 3D 多轴 机械臂 stl 模型UI交互
ui·机器人·stl·wpf
AI视觉网奇36 分钟前
vscode 前行复制到下一行
java·服务器·前端
一只开心鸭!41 分钟前
vue引入并使用物理引擎matter.js
前端·javascript·vue.js
小满zs1 小时前
Nodejs 第八十三章(ElasticSearch全文检索)
前端·elasticsearch·node.js
Z编程1 小时前
uniapp如何根据不同角色自定义不同的tabbar
前端·uni-app
小白_ysf1 小时前
Vue2组件传值(通信)的方式
前端·javascript·vue.js
2401_857622661 小时前
npm缓存深度解析:理解、使用与清除指南
前端·缓存·npm