鸿蒙点击图片放大旋转关闭组件

@Component
export default struct preImg {
  @State isShow: boolean = false
  @Prop img: Resource | string
  @State angle: number = 0;
  @State rotateValue: number = 0;
  @State scaleValue: number = 1;
  @State pinchValue: number = 1;
  @State pinchX: number = 0;
  @State pinchY: number = 0;
  @State offsetX: number = 0;
  @State offsetY: number = 0;
  @State positionX: number = 0;
  @State positionY: number = 0;

  @Builder
  bigImg() {
    Stack({ alignContent: Alignment.TopEnd }) {
      Image(this.img).objectFit(ImageFit.Contain).alt($r('app.media.a_error_img'))
        .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
          // 在组件上绑定布局位置信息
        .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
        .rotate({ angle: this.angle })
        .gesture(
          GestureGroup(GestureMode.Parallel,
          // 在组件上绑定三指触发的捏合手势
          PinchGesture({ fingers: 2 })
              // 当捏合手势触发时，可以通过回调函数获取缩放比例，从而修改组件的缩放比例
            .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');
            }),
            // 绑定拖动手势
            PanGesture()
                // 当触发拖动手势时，根据回调函数修改组件的布局位置信息
              .onActionUpdate((event: GestureEvent|undefined) => {
                if(event){
                  this.offsetX = this.positionX + event.offsetX;
                  this.offsetY = this.positionY + event.offsetY;
                }
              })
              .onActionEnd(() => {
                this.positionX = this.offsetX;
                this.positionY = this.offsetY;
              }),
            RotationGesture()
                // 当旋转手势生效时，通过旋转手势的回调函数获取旋转角度，从而修改组件的旋转角度
              .onActionUpdate((event: GestureEvent|undefined) => {
                if(event){
                  this.angle = this.rotateValue + event.angle;
                }
                console.info('RotationGesture is onActionEnd');
              })
                // 当旋转结束抬手时，固定组件在旋转结束时的角度
              .onActionEnd(() => {
                this.rotateValue = this.angle;
                console.info('RotationGesture is onActionEnd');
              })
              .onActionCancel(() => {
                console.info('RotationGesture is onActionCancel');
              })

           )
        )
      Text('X').deleteStyle().onClick(() => {
        this.isShow = false
      }).zIndex(999)
    }
    .width('100%')
    .height('100%')
  }

  build() {
    Column() {
      if(this.img){
        Image(this.img).objectFit(ImageFit.Fill).alt($r('app.media.a_error_img'))
          .onClick(() => {
            this.isShow = true
            console.log('1rr')
          })
          .bindContentCover(this.isShow, this.bigImg(), {
            modalTransition: ModalTransition.NONE,
            backgroundColor: 'rgba(0,0,0,0.8)',
            onAppear: () => {
              console.log('BindContentCover onAppear.')
            },
            onDisappear: () => {
              console.log('BindContentCover onDisappear.')
            }
          })
      }else{
        Image($r('app.media.a_empty_img')).objectFit(ImageFit.Fill)
      }

    }
  }
}

@Extend(Text)
function deleteStyle() {
  .fontColor(Color.White)
  .fontWeight(700)
  .backgroundColor('#ffbe0707')
  .borderRadius(40)
  .width(40)
  .height(40)
  .textAlign(TextAlign.Center)
  .margin({ right: 20, top: 40 })
}