HarmonyOS Image组件是否支持手势缩放呢？

app需要在视频直播界面显示图像，显示完图像后，有手势缩放的要求，Image组件是否支持这个功能特性呢？如果支持这个功能特性，如何实现手势缩放呢？

HarmonyOS

zbw_apple

2024-10-09 12:36:59

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

可以给Image组件添加PinchGesture捏合手势，代码参考：

// xxx.ets  
@Entry  
@Component  
struct PinchGestureExample {  
  @State scaleValue: number = 1  
  @State pinchValue: number = 1  
  @State pinchX: number = 0  
  @State pinchY: number = 0  
  build() {  
    Stack({alignContent:Alignment.TopStart}) {  
      Image($r('app.media.startIcon'))  
        .height('100%')  
        .width('100%')  
        .objectFit(ImageFit.Contain)  
        .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })  
          // 2指捏合触发该手势事件  
        .gesture(  
          PinchGesture({ fingers: 2 })  
            .onActionStart((event: GestureEvent) => {  
              console.info('Pinch start')  
            })  
            .onActionUpdate((event: GestureEvent) => {  
              if (event) {  
                this.scaleValue = this.pinchValue * event.scale  
                this.pinchX = event.pinchCenterX  
                this.pinchY = event.pinchCenterY  
              }  
            })  
            .onActionEnd((event: GestureEvent) => {  
              this.pinchValue = this.scaleValue  
              console.info('Pinch end')  
            })  
        )  
      Column() {  
        Text('PinchGesture scale:\n' + this.scaleValue)  
        Text('PinchGesture center:\n(' + this.pinchX + ',' + this.pinchY + ')')  
      }  
  
    }.width('100%')  
  }  
}

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-gestures-pinchgesture-V5#%E7%A4%BA%E4%BE%8B