【HarmonyOS】放大缩小手势实现

Georgewu2024-07-28 18:27

【HarmonyOS】放大缩小手势实现

一、鸿蒙中手势的类型： 对于放大缩小手势，在应用开发中使用较为常见，例如预览图片时，扫码时等。

在鸿蒙中对于常见的手势进行的封装，可以通过简单的API进行监听调用，以下是封装的手势类型： 二、手势绑定操作的实现：

1、我们要对UI控件进行手势绑定，最常见的绑定函数是gesture。

2、当实现该函数时，需要从上节中的类型中，选择一种进行实例化，监听回调，实现手势操作开始，更新和结束三个回调。实现放大缩小功能，我们使用捏合手势，PinchGesture。

3、一般我们会根据更新回调中的数值，判定前次手势操作和当前手势操作的差值，来决定逻辑的处理，是否是放大还是缩小，以及这个动作的尺度。

因为系统回调的频率快，直接通过回到里的scale数值进行操作，渲染也会特别快，很影响性能。特别是有些系统API，高强度的set赋值，会导致其渲染卡顿，或者延迟严重。

三、DEMO示例：

dart 复制代码

/**
 * 手势界面
 */
@Entry
@Component
struct GesturePage {

  private TAG: string = "GesturePage";

  @State mScale: number = 1;
  @State pinchValue: number = 1

  private mOldScale: number = 0;
  private MIN_VAL: number = 0.1;
  private SCALE_IF_VAL: number = 1;

  build() {
    Row() {
      Column() {
        Image($r("app.media.background")).size({
          width: "100%",
          height: "100%"
        })
          .scale({
            x: this.mScale,
            y: this.mScale,
            z: 1
          })
      }
      .width('100%')
    }
    .height('100%')
    .gesture(PinchGesture()
      .onActionStart(() => {
        console.info(this.TAG, 'PanGesture onActionStart');
      })
      .onActionUpdate((event?: GestureEvent) => {
        if (event) {
          let newScale = event.scale;
          let dval = Math.abs(newScale - this.mOldScale);
          if(dval > this.MIN_VAL){
            // 放大手势
            if(dval > this.SCALE_IF_VAL){
              console.info(this.TAG, 'PanGesture zoom in');
            }
            // 缩小手势
            else{
              console.info(this.TAG, 'PanGesture zoom out');
            }
            this.mScale = this.pinchValue * event.scale
            this.mOldScale = newScale;
          }
        }
        console.info(this.TAG, 'PanGesture onActionUpdate');
      })
      .onActionEnd(() => {
        this.mOldScale = 0;
        this.pinchValue = this.mScale;
        console.info(this.TAG, 'PanGesture onActionEnd');
      }))
  }
}