devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ArkTS的手势处理（部分）_arkts-x

作者：花生_TL007 | 2024-03-20 18:32:34

赞

踩

arkts-x

目录

说些废话

    官方文档：手势处理（基于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'
//          })
        })
    )
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

展示

图1

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(() => {
        })
    )
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

展示

图2

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%')
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

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%')
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

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%')
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

展示

    怎么这么难识别上 = =
图3

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%')
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

展示

图4

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/275725
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号