鸿蒙开发5.0【手势的图片预览与缩放】

场景一：对图片进行放大、缩小、拖拽移动，且放大过程中也可同时进行拖拽操作

方案

1、使用组合手势GestureGroup，同时绑定捏合手势PinchGesture和滑动手势PanGesture，设置组合手势识别模式为并行识别模式：Parallel，并行识别组合手势中注册的手势将同时进行识别，直到所有手势识别结束，并行识别手势组合中的手势进行识别时互不影响。

2、在对图片进行双指捏合时，优先触发绑定的PinchGesture手势，对图片进行缩放操作；当滑动拖拽图片时，识别绑定的PanGesture手势，对图片进行拖拽移动。

核心代码

1、绑定组合手势GestureGroup，设置为并行识别模式，添加捏合手势PinchGesture和滑动手势PanGesture。

@Styles
onImageGesture(){
  .gesture(
    GestureGroup(GestureMode.Parallel,
      // 双指捏合手势
      PinchGesture({ fingers: 2, distance: 0.1 })
        .onActionUpdate((event: GestureEvent) => {
          this.onPinchGestureActionUpdate(event);
        })
        .onActionEnd(() => {
          this.onPinchGestureActionEnd();
        }),
      // 拖动手势
      PanGesture(this.panOption)
        .onActionUpdate((event?: GestureEvent) => {
          this.onPanGestureActionUpdate(event);
        })
        .onActionEnd(() => {
          this.onPanGestureActionEnd();
        })
    )
  )
}

2、在捏合手势的onActionUpdate和onActionEnd回调中修改scale参数，进行图片缩放处理。

// 当捏合手势触发时，可以通过回调函数获取缩放比例，从而修改组件的缩放比例
onPinchGestureActionUpdate(event: GestureEvent) {
  const SCALE_VALUE = this.pinchValue * event.scale;
  if (SCALE_VALUE <= this.imageMeta.MAX_SCALE_VALUE && SCALE_VALUE >= this.MIN_SCALE) {
    this.scaleValue = SCALE_VALUE;
    this.pinchX = event.pinchCenterX;
    this.pinchY = this.getPinchY(event.pinchCenterY);
    if (this.scaleValue > 1) {
      this.offsetX = 0;
    }
  }
}

getPinchY(pinchCenterY: