怎么监听捏合手势并获取缩放值？

Question

在HarmonyOS中我想实现一个图片预览缩放的功能，用的是 PinchGesture，但是我不知道怎么获取缩放的比例值。谁知道 scale 是怎么拿的？有没有示例代码参考一下。

Answer 1

在 HarmonyOS 中监听捏合手势并获取缩放值，可通过PinchGesture的事件回调实现。以下是完整的实现方案：
一、核心 API 与参数说明
PinchGesture提供三个关键事件：
onActionStart：捏合开始时触发，包含初始状态。
onActionUpdate：捏合过程中持续触发，包含实时缩放值。
onActionEnd：捏合结束时触发，包含最终状态。
事件对象中的核心参数：
scale：当前缩放比例（相对于初始状态）。
centerX/centerY：捏合中心点坐标。
二、实现图片缩放功能
以下是一个完整的图片预览组件示例，支持捏合缩放：
typescript
import { PinchGesture } from '@ohos.multimodalinput';

@Entry
@Component
struct ImagePreview {
@State scaleValue: number = 1.0; // 当前缩放比例
@State lastScale: number = 1.0; // 上次缩放比例（用于累加计算）
@State centerX: number = 0; // 捏合中心点X坐标
@State centerY: number = 0; // 捏合中心点Y坐标

build() {

Column() {
  // 图片容器，应用缩放变换
  Image($r('app.media.sample_image')) // 替换为实际图片资源
    .width('100%')
    .height('100%')
    .objectFit(ImageFit.Contain)
    .scale({ x: this.scaleValue, y: this.scaleValue }) // 应用缩放
    .gesture(
      // 创建捏合手势
      PinchGesture()
        .onActionStart((event) => {
          // 记录捏合开始时的状态
          this.lastScale = this.scaleValue;
          this.centerX = event.centerX;
          this.centerY = event.centerY;
          console.info(`捏合开始: scale=${event.scale}, center=(${this.centerX}, ${this.centerY})`);
        })
        .onActionUpdate((event) => {
          // 实时更新缩放值（相对于初始状态的累积缩放）
          this.scaleValue = this.lastScale * event.scale;
          console.info(`捏合更新: scale=${event.scale}, 总缩放=${this.scaleValue}`);
        })
        .onActionEnd((event) => {
          // 捏合结束，可添加边界检查或动画效果
          console.info(`捏合结束: 最终缩放=${this.scaleValue}`);
        })
    )
}
.width('100%')
.height('100%')
.backgroundColor('#f5f5f5')

}
}

三、关键优化点
缩放范围限制：
typescript
// 在onActionUpdate中添加范围限制
this.scaleValue = Math.max(0.5, Math.min(3.0, this.lastScale * event.scale));

中心点定位：
如需实现以捏合中心为原点缩放，需结合translate变换：
typescript
.scale({ x: this.scaleValue, y: this.scaleValue })
.translate({
x: (this.scaleValue - 1) * this.centerX,
y: (this.scaleValue - 1) * this.centerY
})

平滑过渡：
添加动画效果使缩放更流畅：
typescript
.animate({
duration: 200,
curve: AnimationCurve.Ease
})
.scale({ x: this.scaleValue, y: this.scaleValue })

四、完整示例（带边界限制和中心点缩放）
typescript
@Entry
@Component
struct ImagePreview {
@State scaleValue: number = 1.0;
@State translateX: number = 0;
@State translateY: number = 0;
@State lastScale: number = 1.0;
@State startTranslateX: number = 0;
@State startTranslateY: number = 0;
@State centerX: number = 0;
@State centerY: number = 0;

// 最大/最小缩放限制
private readonly MIN_SCALE = 0.5;
private readonly MAX_SCALE = 3.0;

build() {

Column() {
  Image($r('app.media.sample_image'))
    .width('100%')
    .height('100%')
    .objectFit(ImageFit.Contain)
    .scale({ x: this.scaleValue, y: this.scaleValue })
    .translate({ x: this.translateX, y: this.translateY })
    .gesture(
      PinchGesture()
        .onActionStart((event) => {
          this.lastScale = this.scaleValue;
          this.startTranslateX = this.translateX;
          this.startTranslateY = this.translateY;
          this.centerX = event.centerX;
          this.centerY = event.centerY;
        })
        .onActionUpdate((event) => {
          // 计算新的缩放值（带范围限制）
          const newScale = Math.max(this.MIN_SCALE, Math.min(this.MAX_SCALE, this.lastScale * event.scale));
          
          // 计算基于中心点的位移（保持图片在手指间的位置）
          const scaleFactor = newScale / this.scaleValue;
          const deltaX = (this.centerX + this.translateX) * (scaleFactor - 1);
          const deltaY = (this.centerY + this.translateY) * (scaleFactor - 1);
          
          this.scaleValue = newScale;
          this.translateX = this.startTranslateX - deltaX;
          this.translateY = this.startTranslateY - deltaY;
        })
    )
}
.width('100%')
.height('100%')
.backgroundColor('#f5f5f5')

}
}
五、注意事项
事件冲突：
若同时使用滑动手势，建议通过GestureGroup组合管理，避免冲突。
资源路径：
示例中的$r('app.media.sample_image')需替换为实际图片资源路径。
性能优化：
对于大型图片，建议使用Image组件的resizeMode属性优化加载性能。
通过以上方法，可实现高精度的捏合缩放功能，满足图片预览等场景需求。

Answer 2

据我所知，PinchGesture 的事件回调中会包含 GestureEvent，其中的 scale 字段就是你要的缩放比例值，数值越大代表放大，越小代表缩小。

你可以这样写：

Image($r('app.media.preview')).width('100%')
  .gesture(
    PinchGesture().onAction((event: GestureEvent) => {
      console.info(`缩放比例: ${event.scale}`);
    })
  )

这个回调会在捏合时持续触发，建议结合节流控制或动画使用，避免缩放过快。