HarmonyOS NEXT Practical: Image Magnification and Reduction

Goal: Use two fingers to pinch and zoom in and out of the image Knowledge points: PinchGesture is used to trigger a pinch gesture, with a minimum of 2 fingers and a maximum of 5 fingers, and a minimum recognition distance of 5vp. interface PinchGesture(value?:{fingers?:number, distance?:number}) The pinch gesture is used to trigger the pinch gesture event and has two optional parameters: Fingers: Used to declare the minimum number of fingers required to trigger a pinch gesture, with a minimum value of 2, a maximum value of 5, and a default value of 2. The trigger gesture can have more fingers than the number of fingers, but only the fingers that fall first and have the same number as the fingers participate in the gesture calculation. Distance: Used to declare the minimum distance that triggers the pinch gesture, in vp, with a default value of 5. Explanation: Value range: [0,+∞). When the recognition distance value is less than or equal to 0, it will be converted to the default value. API15 adds: isFingerCountLimited Check the number of fingers touching the screen. If the number of fingers touching the screen is not equal to the minimum number of fingers set to trigger pinching (i.e. the fingers parameter mentioned above), the gesture will not be recognized. The gesture can only be successfully recognized when the hand index of touching the screen is equal to the minimum number of fingers set to trigger the pinch gesture, and the sliding distance meets the threshold requirement (only the two fingers that fall first participate in the gesture calculation, if one of them is lifted, the gesture recognition fails). For gestures that have been successfully recognized, changing the number of fingers touching the screen in the future will not trigger the onActionUpdate event, but it can trigger the onActionEnd event. Default value: false。 event onActionStart(event:(event: GestureEvent) => void) //Pinch gesture recognition successfully callback. onActionUpdate(event:(event: GestureEvent) => void) //Pinch gesture callback during movement. onActionEnd(event:(event: GestureEvent) => void) //Pinch gesture recognition successful, triggering a callback when the finger is raised. onActionCancel(event: () => void) //Pinch gesture recognition successful, triggered callback upon receiving touch cancellation event. attribute tag： Set Pinch gesture flag to distinguish bound gestures when customizing gesture judgment. allowedTypes： Set the event input source supported by Pinch gesture. Actual combat:ImageEnlargementReductionDemoPage @Entry @Component struct ImageEnlargementReductionDemoPage { @State scaleValue: number = 1; @State pinchValue: number = 1; @State pinchX: number = 0; @State pinchY: number = 0; build() { Stack({ alignContent: Alignment.Top }) { Image('https://pica.zhimg.com/v2-764199c9470ff436082f35610f1f81f4_1440w.jpg') .width('100%') // 在组件上绑定缩放比例，可以通过修改缩放比例来实现组件的缩小或者放大 .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 }) .gesture( // 在组件上绑定2指触发的捏合手势 PinchGesture({ fingers: 2 }) .onActionStart((event: GestureEvent | undefined) => { console.info('Pinch start'); }) // 当捏合手势触发时，可以通过回调函数获取缩放比例，从而修改组件的缩放比例 .onActionUpdate((event: GestureEvent | undefined) => { if (event) { this.scaleValue = this.pinchValue * event.scale; this.pinchX = event.pinchCenterX; this.pinchY = event.pinchCenterY; } }) .onActionEnd(() => { this.pinchValue = this.scaleValue; console.info('Pinch end'); }) ) Text('图片放大缩小Demo') .fontColor(Color.Orange) .fontSize(24) } .width('100%') .height('100%') } }

Mar 28, 2025 - 09:50

HarmonyOS NEXT Practical: Image Magnification and Reduction

Goal: Use two fingers to pinch and zoom in and out of the image

Knowledge points:
PinchGesture is used to trigger a pinch gesture, with a minimum of 2 fingers and a maximum of 5 fingers, and a minimum recognition distance of 5vp.
interface

PinchGesture(value?:{fingers?:number, distance?:number})

The pinch gesture is used to trigger the pinch gesture event and has two optional parameters:

Fingers: Used to declare the minimum number of fingers required to trigger a pinch gesture, with a minimum value of 2, a maximum value of 5, and a default value of 2. The trigger gesture can have more fingers than the number of fingers, but only the fingers that fall first and have the same number as the fingers participate in the gesture calculation.
Distance: Used to declare the minimum distance that triggers the pinch gesture, in vp, with a default value of 5. Explanation: Value range: [0,+∞). When the recognition distance value is less than or equal to 0, it will be converted to the default value.

API15 adds:
isFingerCountLimited
Check the number of fingers touching the screen. If the number of fingers touching the screen is not equal to the minimum number of fingers set to trigger pinching (i.e. the fingers parameter mentioned above), the gesture will not be recognized. The gesture can only be successfully recognized when the hand index of touching the screen is equal to the minimum number of fingers set to trigger the pinch gesture, and the sliding distance meets the threshold requirement (only the two fingers that fall first participate in the gesture calculation, if one of them is lifted, the gesture recognition fails). For gestures that have been successfully recognized, changing the number of fingers touching the screen in the future will not trigger the onActionUpdate event, but it can trigger the onActionEnd event. Default value: false。

event

onActionStart(event:(event: GestureEvent) => void)  //Pinch gesture recognition successfully callback.
onActionUpdate(event:(event: GestureEvent) => void) //Pinch gesture callback during movement.
onActionEnd(event:(event: GestureEvent) => void)    //Pinch gesture recognition successful, triggering a callback when the finger is raised.
onActionCancel(event: () => void)   //Pinch gesture recognition successful, triggered callback upon receiving touch cancellation event.

attribute
tag： Set Pinch gesture flag to distinguish bound gestures when customizing gesture judgment.
allowedTypes： Set the event input source supported by Pinch gesture.

Actual combat:ImageEnlargementReductionDemoPage

@Entry
@Component
struct ImageEnlargementReductionDemoPage {
  @State scaleValue: number = 1;
  @State pinchValue: number = 1;
  @State pinchX: number = 0;
  @State pinchY: number = 0;

  build() {
    Stack({ alignContent: Alignment.Top }) {
      Image('https://pica.zhimg.com/v2-764199c9470ff436082f35610f1f81f4_1440w.jpg')
        .width('100%')
          // 在组件上绑定缩放比例，可以通过修改缩放比例来实现组件的缩小或者放大
        .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
        .gesture(
          // 在组件上绑定2指触发的捏合手势
          PinchGesture({ fingers: 2 })
            .onActionStart((event: GestureEvent | undefined) => {
              console.info('Pinch start');
            })
              // 当捏合手势触发时，可以通过回调函数获取缩放比例，从而修改组件的缩放比例
            .onActionUpdate((event: GestureEvent | undefined) => {
              if (event) {
                this.scaleValue = this.pinchValue * event.scale;
                this.pinchX = event.pinchCenterX;
                this.pinchY = event.pinchCenterY;
              }
            })
            .onActionEnd(() => {
              this.pinchValue = this.scaleValue;
              console.info('Pinch end');
            })
        )

      Text('图片放大缩小Demo')
        .fontColor(Color.Orange)
        .fontSize(24)
    }
    .width('100%')
    .height('100%')
  }
}