HarmonyOS 开发实践 —— 基于手势的图片预览与缩放

📚往期学习笔录📝：

📝 鸿蒙（HarmonyOS）北向开发知识点记录~
📝 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
📝 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
📝 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
📝 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
📝 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
📝 记录一场鸿蒙开发岗位面试经历~
📝 持续更新中……

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

方案

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();
        }),