HarmonyOS 鸿蒙Next应用实现放大缩小手势实现源码和步骤讲解

HarmonyOS 鸿蒙Next应用实现放大缩小手势实现源码和步骤讲解

鸿蒙应用实现放大缩小手势实现源码和步骤讲解

3 回复

一、结论

对于放大缩小手势，在应用开发中使用较为常见，例如预览图片时，扫码时等。

在鸿蒙中对于常见的手势进行的封装，可以通过简单的API进行监听调用即可，放大缩小通过捏合手势，PinchGesture即可实现。

二、代码实现和详细解释

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

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

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

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

/**
 * 手势界面
 */
@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');
      }))
  }
}

更多关于HarmonyOS 鸿蒙Next应用实现放大缩小手势实现源码和步骤讲解的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


鸿蒙Next应用实现放大缩小手势可通过GestureGroup和PinchGesture实现。具体步骤：

  1. 创建PinchGesture监听器，在onActionStart、onActionUpdate、onActionEnd回调中处理缩放逻辑。
  2. 使用GestureGroup组合手势。
  3. 通过组件.gesture()方法绑定手势到目标组件。 关键代码：PinchGesture({ fingers: 2 }).onActionUpdate((event: GestureEvent) => { // 根据event.scale更新组件缩放比例 })。

在HarmonyOS Next中，实现视图的放大缩小手势，核心是使用PinchGesture（捏合手势）。以下是关键步骤和示例代码：

1. 定义手势与状态变量 在组件顶部，使用@State装饰器定义一个缩放比例状态变量。

@State scaleValue: number = 1; // 初始缩放比例为1

2. 构建可缩放的视图 使用Gesture组件的gesture方法绑定捏合手势到目标组件（如Image或Column）。

// 以Image组件为例
Image($r('app.media.icon'))
  .width(200)
  .height(200)
  .scale({ x: this.scaleValue, y: this.scaleValue }) // 绑定缩放比例
  .gesture(
    // 绑定捏合手势
    GestureGroup(GestureMode.Exclusive,
      PinchGesture()
        .onActionStart(() => {
          // 手势开始，可在此记录初始状态
        })
        .onActionUpdate((event: PinchGestureEvent) => {
          // 手势更新时，根据scaleFactor计算新比例
          // 建议加入最小/最大值限制，如0.5到3倍
          let newScale = this.scaleValue * event.scale;
          this.scaleValue = Math.min(Math.max(newScale, 0.5), 3);
        })
        .onActionEnd(() => {
          // 手势结束，可在此执行动画或复位逻辑
        })
    )
  )

3. 手势参数说明

  • event.scale：本次手势事件的缩放因子（基于上次事件的变化比例）。
  • 通常需结合this.scaleValue（累计总比例）进行计算。
  • 建议通过Math.min和Math.max限制缩放范围，避免视图过小或过大。

4. 手势组（GestureGroup）的使用

  • 示例中使用了GestureGroup并指定GestureMode.Exclusive（独占模式），这是为了在同时存在多种手势（如拖拽、捏合）时，避免手势冲突。
  • 如果仅需捏合手势，可单独使用PinchGesture()。

5. 完整示例（组件形式）

@Entry
@Component
struct ScaleDemo {
  @State scaleValue: number = 1;

  build() {
    Column() {
      Image($r('app.media.icon'))
        .width(200)
        .height(200)
        .scale({ x: this.scaleValue, y: this.scaleValue })
        .gesture(
          GestureGroup(GestureMode.Exclusive,
            PinchGesture()
              .onActionUpdate((event: PinchGestureEvent) => {
                let newScale = this.scaleValue * event.scale;
                this.scaleValue = Math.min(Math.max(newScale, 0.5), 3);
              })
          )
        )
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

关键点总结

  • 核心是PinchGesture监听onActionUpdate事件，通过event.scale更新绑定的@State比例变量。
  • 缩放比例需绑定到组件的.scale属性。
  • 使用GestureGroup管理手势冲突，在复杂交互场景中尤为重要。
  • 通过计算限制缩放范围，提升用户体验。

此实现利用了HarmonyOS Next的声明式UI与手势API，代码简洁且响应式。

回到顶部