ArkTS的手势处理（部分）

ArkTS的部分手势处理。

Selma003

1866人浏览 · 2022-12-20 14:40:26

Selma003 · 2022-12-20 14:40:26 发布

说些废话

官方文档：手势处理（基于ArkTS的声明式开发范式）
我只写了几个，而且我是一个工程测试一个手势，所以就只贴一下.ets的代码了，注释也没写而且都是用的API 8（FA），创建的华为鸿蒙工程。
那个按速度来识别的SwipeGesture（滑动手势）和以距离来识别的PanGesture（拖动手势）很像，因为我只写了滑动手势，我觉得滑动手势好钝好难识别上。。。

环境

HUAWEI MatePad Pro 10.8英寸 2019款 HarmonyOS3.0.0.163
DevEco Studio 3.1 Canary1
SDK 8
我看的《API参考》更新时间为2022-12-16 17:46

代码

PinchGesture（捏合手势）

index.ets

import prompt from '@system.prompt';
@Entry
@Component
struct Index {
  //捏合形成的比例
  @State scaleValue: number = 1;
  //图片的宽高
  @State image_width: number = 100;
  @State image_height: number = 100;

  build() {
    Row() {
      Column() {
        Image($r('app.media.windmill'))
          //最大就变成300叭
          .width(this.image_width)
          .height(this.image_height)
      }
      .width('100%')
    }
    .height('100%')
    .gesture(
      PinchGesture({ fingers: 2 })
        .onActionStart((event: GestureEvent) => {
//          prompt.showToast({
//            message: 'onActionStart'
//          })
        })
        .onActionUpdate((event: GestureEvent) => {
          this.image_width *= event.scale
          if(this.image_width > 300){
            this.image_width = 300
          }
          if(this.image_width < 100){
            this.image_width = 100
          }
          this.image_height = this.image_width
//          prompt.showToast({
//            message: 'event = ' + JSON.stringify(event)
//          })
        })
        .onActionEnd(() => {
//          prompt.showToast({
//            message: 'onActionEnd'
//          })
        })
    )
  }
}

展示

RotationGesture（旋转手势）

index.ets

@Entry
@Component
struct Index {
  @State image_angle: number = 0
  //0度和360度的时候z是1
  build() {
    Row() {
      Column() {
        Image($r('app.media.windmill'))
          .width(200)
          .height(200)
          .rotate({
              // 组件以(0, 0, 1)为旋转轴，中心点顺时针旋转angle度
              x: 0,
              y: 0,
              //有bug，转完之后再去转的时候，又是以最初的图片位置开始转的
              z: 1,
              angle: this.image_angle,
              centerX: '50%',
              centerY: '50%'
            }
          )
      }
      .width('100%')
    }
    .height('100%')
    .gesture(
      RotationGesture({fingers: 2})
        .onActionStart((event: GestureEvent) => {
        })
        .onActionUpdate((event: GestureEvent) => {
          this.image_angle = event.angle;
        })
        .onActionEnd(() => {
        })
    )
  }
}

展示

SwipeGesture（滑动手势）

index.ets

import prompt from '@system.prompt';
import featureAbility from '@ohos.ability.featureAbility';
@Entry
@Component
struct Index {
  @State message: string = 'Page1'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .gesture(
      SwipeGesture({
        //触发滑动手势的滑动方向为水平方向。
        direction: SwipeDirection.Horizontal,
        fingers: 1,
        speed: 50
      })
        //滑动手势识别成功回调。
        .onAction(event => {
          //angle是负的就是从左往右滑
          if(event.angle > 0){
            //从右往左滑
            featureAbility.startAbility({
              want: {
                deviceId: '',
                bundleName: 'com.openvalley.cyj.gesture.swipe',
                abilityName: 'com.openvalley.cyj.gesture.swipe.MainAbility',
                parameters: {
                  url: 'pages/show'
                }
              }
            })
          }else{
            //从左往右滑
            prompt.showToast({
              message: '当前已经是第一页。'
            })
          }
        })
    )
    .height('100%')
  }
}

show.ets

import prompt from '@system.prompt';
import featureAbility from '@ohos.ability.featureAbility';
@Entry
@Component
struct Show {
  @State message: string = 'Page2'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .gesture(
    SwipeGesture({
      //触发滑动手势的滑动方向为水平方向。
      direction: SwipeDirection.Horizontal,
      fingers: 1,
      speed: 50
    })
      //滑动手势识别成功回调。
      .onAction(event => {
        //angle是负的就是从左往右滑
        if(event.angle > 0){
          //从右往左滑
          featureAbility.startAbility({
            want: {
              deviceId: '',
              bundleName: 'com.openvalley.cyj.gesture.swipe',
              abilityName: 'com.openvalley.cyj.gesture.swipe.MainAbility',
              parameters: {
                url: 'pages/page'
              }
            }
          })
        }else{
          //从左往右滑
          featureAbility.startAbility({
            want: {
              deviceId: '',
              bundleName: 'com.openvalley.cyj.gesture.swipe',
              abilityName: 'com.openvalley.cyj.gesture.swipe.MainAbility',
              parameters: {
                url: 'pages/index'
              }
            }
          })
        }
      })
    )
    .height('100%')
  }
}

page.ets

import prompt from '@system.prompt';
import featureAbility from '@ohos.ability.featureAbility';
@Entry
@Component
struct Page {
  @State message: string = 'Page3'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .gesture(
    SwipeGesture({
      //触发滑动手势的滑动方向为水平方向。
      direction: SwipeDirection.Horizontal,
      fingers: 1,
      speed: 50
    })
      //滑动手势识别成功回调。
      .onAction(event => {
        //angle是负的就是从左往右滑
        if(event.angle > 0){
          //从右往左滑
          prompt.showToast({
            message: '当前已经是最后一页。'
          })
        }else{
          //从左往右滑
          featureAbility.startAbility({
            want: {
              deviceId: '',
              bundleName: 'com.openvalley.cyj.gesture.swipe',
              abilityName: 'com.openvalley.cyj.gesture.swipe.MainAbility',
              parameters: {
                url: 'pages/show'
              }
            }
          })
        }
      })
    )
    .height('100%')
  }
}

展示

怎么这么难识别上 = =

GestureGroup（组合手势）

我这里写（cv）的是旋转+捏合。

index.ets

@Entry
@Component
struct Index {
  //捏合形成的比例
  @State scaleValue: number = 1;
  //图片的宽高
  @State image_width: number = 100;
  @State image_height: number = 100;
  //旋转的角度
  @State image_angle: number = 0
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Image($r('app.media.windmill'))
          .width(this.image_width)
          .height(this.image_height)
          .rotate({
            // 组件以(0, 0, 1)为旋转轴，中心点顺时针旋转angle度
            x: 0,
            y: 0,
            //有bug，转完之后再去转的时候，又是以最初的图片位置开始转的
            z: 1,
            angle: this.image_angle,
            centerX: '50%',
            centerY: '50%'
          }
          )
      }
      .width('100%')
    }
    .gesture(
      GestureGroup(
        //并发识别，注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。
        GestureMode.Parallel,
        RotationGesture({fingers: 2})
          .onActionUpdate((event: GestureEvent) => {
            this.image_angle = event.angle;
          })
        , PinchGesture({ fingers: 2 })
          .onActionUpdate((event: GestureEvent) => {
            this.image_width *= event.scale
            if(this.image_width > 500){
              this.image_width = 500
            }
            if(this.image_width < 100){
              this.image_width = 100
            }
            this.image_height = this.image_width
          })
      )
    )
    .height('100%')
  }
}