HarmonyOS 需要一个图片预览组件

@Entry  
@Component  
struct Index {  
  @State visible: Visibility = Visibility.None  
  @State scaleValue: number = 1  
  @State pinchValue: number = 1  
  @State pinchX: number = 0  
  @State pinchY: number = 0  
  @State count: number = 0  
  @State offsetX: number = 0  
  @State offsetY: number = 0  
  @State positionX: number = 0  
  @State positionY: number = 0  
  
  
  build() {  
    Stack() {  
      Row() {  
        Column() {  
          Image($r('app.media.icon'))  
            .width(100)  
            .height(100)  
            .onClick(() => {  
              console.log("hit me!")  
              if (this.visible == Visibility.Visible) {  
                this.visible = Visibility.None  
              } else {  
                this.visible = Visibility.Visible  
              }  
            })  
        }  
        .width('100%')  
        .justifyContent(FlexAlign.Center)  
        .alignItems(HorizontalAlign.Center)  
      }  
      .height('100%')  
  
  
      Text('')  
        .onClick(() => {  
          if (this.visible == Visibility.Visible) {  
            this.visible = Visibility.None  
          } else {  
            this.visible = Visibility.Visible  
          }  
        })  
        .width('100%')  
        .height('100%')// 透明度可以自己调节一下  
        .opacity(0.16)  
        .backgroundColor(0x000000)  
        .visibility(this.visible)  
  
      Column() {  
        Image($r('app.media.icon'))  
          .width(300)  
          .height(300)  
          .draggable(false)  
          .visibility(this.visible)  
          .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })  
          .translate({ x: this.offsetX, y: this.offsetY, z: 0 })  
  
          .gesture(  
            GestureGroup(GestureMode.Parallel,  
              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  
                    PanGesture()  
                      .onActionUpdate((event?: GestureEvent) => {  
                        if (event) {  
                          this.offsetX = this.positionX + event.offsetX  
                          this.offsetY = this.positionY + event.offsetY  
                        }  
                        console.info('pan update')  
                      })  
                      .onActionEnd(() => {  
                        this.positionX = this.offsetX  
                        this.positionY = this.offsetY  
                        console.info('pan end')  
                      })  
                    )  
                    )  
                  }  
                }  
      }  
    }