使用场景

开发中很多应用都会用到组合手势，比如在图片查看器/编辑器中，用户可以自由拖动、缩放、旋转图片进行查看或编辑; 在地图应用中，用户拖动地图平移，双指缩放地图级别，双指旋转地图方向; 在商品产品展示中，用户可以通过手势360度查看商品模型等。

实现思路

实现复合手势交互的核心是：分别定义状态来记录手势的效果，然后将这些手势组合起来，并在手势回调中更新这些状态，最后通过状态变化驱动UI的变换。

一、定义状态变量：

我们需要为每一种变换定义一个状态变量：

offsetX, offsetY: 记录拖拽的偏移量。

scale: 记录缩放比例。

rotateAngle: 记录旋转角度。

所有这些变量都使用 @State 装饰，以确保它们变化时UI能自动刷新。

二、应用基础变换到UI组件：

在目标组件上，使用 .translate(), .scale(), .rotate() 等通用属性方法。

将这些方法的值绑定到我们定义的 @State 变量上。例如：.translate({ x: this.offsetX, y: this.offsetY })。

三、创建并组合手势：

拖拽手势 (PanGesture): 创建一个 PanGesture 实例。在其 onActionUpdate 回调中，获取手指移动的增量（offsetX, offsetY），并累加到我们的 @State 偏移量变量上。

缩放手势 (PinchGesture): 创建一个 PinchGesture 实例。在其 onActionUpdate 回调中，获取缩放因子（scale），并更新我们的 @State 缩放变量。

旋转手势 (RotationGesture): 创建一个 RotationGesture 实例。在其 onActionUpdate 回调中，获取旋转角度（angle），并更新我们的 @State 旋转变量。

四、使用 GestureGroup 组合手势：

将上述三个手势用 GestureGroup 包裹起来。

设置 GestureGroup 的模式为 GestureMode.Parallel（并行识别）。这意味着系统可以同时识别和处理这三种手势，允许用户一边拖拽一边缩放旋转，实现最自然的交互效果。

五、将手势组绑定到组件：

最后，通过 .gesture() 修饰符，将创建好的 GestureGroup 绑定到 Image 组件上。

完整实现代码

// InteractiveImagePage.ets

@Entry
@Component
struct InteractiveImagePage {
  // 1. 定义状态变量来记录手势变换
  [@State](/user/State) offsetX: number = 0;
  [@State](/user/State) offsetY: number = 0;
  [@State](/user/State) scaleT: number = 1;
  [@State](/user/State) rotateAngle: number = 0;

  build() {
    Column() {
      Text('合手势交互')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 50, bottom: 30 })

      Text('拖动、双指缩放、旋转图片')
        .fontSize(16)
        .fontColor('#666666')
        .margin({ bottom: 20 })

      // 2. 应用基础变换到图片组件
      Image($r('app.media.background'))
        .width(200)
        .height(200)
        .borderRadius(20)
          // 关键：将状态变量绑定到变换属性上
        .translate({ x: this.offsetX, y: this.offsetY })
        .scale({ x: this.scaleT, y: this.scaleT })
        .rotate({ angle: this.rotateAngle })
          // 5. 将组合手势绑定到图片上
        .gesture(
          // 4. 使用 GestureGroup 组合手势
          GestureGroup(GestureMode.Parallel,
            // 拖拽手势
            PanGesture({ fingers: 1 })
              .onActionUpdate((event: GestureEvent) => {
                // 累加拖拽偏移量
                this.offsetX += event.offsetX;
                this.offsetY += event.offsetY;
                console.info(`[Pan] Offset: (${this.offsetX.toFixed(2)}, ${this.offsetY.toFixed(2)})`);
              }),
            // 缩放手势
            PinchGesture()
              .onActionUpdate((event: GestureEvent) => {
                // 更新缩放比例
                this.scaleT = event.scale;
                console.info(`[Pinch] Scale: ${this.scaleT.toFixed(2)}`);
              }),
            // 旋转手势
            RotationGesture()
              .onActionUpdate((event: GestureEvent) => {
                // 更新旋转角度
                this.rotateAngle = event.angle;
                console.info(`[Rotation] Angle: ${this.rotateAngle.toFixed(2)}°`);
              })
          )
        )
        .animation({ // 添加平滑动画效果，使交互更流畅
          duration: 100,
          curve: Curve.EaseInOut
        })

      Blank() // 填充剩余空间

      Button('重置')
        .margin({ bottom: 50 })
        .onClick(() => {
          // 重置所有状态
          this.offsetX = 0;
          this.offsetY = 0;
          this.scaleT = 1;
          this.rotateAngle = 0;
        })

    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Center)
  }
}