nova-live/projects/live-app/src/app/components/image-preview/image-preview.component.ts

import { CommonModule } from '@angular/common';
import { Component, Input, OnInit, AfterViewInit, ElementRef, ViewChild, ChangeDetectorRef } from '@angular/core';
import { GestureController, Gesture, IonicModule } from '@ionic/angular';

@Component({
  selector: 'app-image-preview',
  templateUrl: './image-preview.component.html',
  styleUrls: ['./image-preview.component.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule],
})
export class ImagePreviewComponent implements OnInit, AfterViewInit {
  @Input() image: string = '';
  show: string = 'none';
  private gesture: Gesture | undefined;
  private scale = 1;
  private startX = 0;
  private startY = 0;
  private currentX = 0;
  private currentY = 0;

  // @ViewChild('image-container', { static: true }) imageContainer!: ElementRef;

  constructor(private gestureCtrl: GestureController,private cdRef: ChangeDetectorRef) {}

  ngOnInit(): void {
    // 初始化手势
  }

  ngAfterViewInit(): void {
    this.initGesture();
  }

  initGesture(): void {
    let doc:any = document.getElementById('image-container')
    this.gesture = this.gestureCtrl.create({
      el: doc,
      gestureName: 'pinch-zoom',
      threshold: 0,
      onStart: (_: any) => {
        this.startX = this.currentX;
        this.startY = this.currentY;
      },
      onMove: (ev: any) => {
       if(ev.scale) this.scale = Math.max(1, Math.min(3, ev.scale));
        this.currentX = this.startX + ev.deltaX;
        this.currentY = this.startY + ev.deltaY;
        this.cdRef.detectChanges();
      },
      onEnd: () => {
        if (this.scale < 1.1) {
          this.scale = 1;
          this.currentX = 0;
          this.currentY = 0;
        }
        console.log(this.getTransformStyle());
      }
    });
    this.gesture.enable();
  }

  getTransformStyle(): string {
    return `scale(${this.scale}) translateX(${this.currentX}px) translateY(${this.currentY}px)`;
  }
  close(){
    this.show = 'none'
  }
}