使用AngularMaterial + cdkDrag将位置重置为原始位置

时间:2019-10-09 16:28:20

标签: angular-material angular-cdk

我创建了一个图像查看器,使您可以缩放和拖动图像。正常运行,有一个问题,当更改图像源时,我无法找到使用Material CDK将图像重置到原始位置的本机方法,例如本例中我对图像缩放所做的操作:

export class ImageComponent implements OnInit, OnChanges {
  @Input() src: string;
  @Input() height: number;
  @Input() alt: string;
  @Input() zoomFactor = 0.1;
  @Input() wheelZoom = 0.1;

  get transform() {
    const transform = `translate(${this.translateX}px, ${this.translateY}px) rotate(${this.rotation}deg) scale(${this.scale})`;
    return this.sanitizer.bypassSecurityTrustStyle(transform);
  }

  public fullscreen = false;
  public loading = true;
  public scale = 1;
  private rotation = 0;
  private translateX = 0;
  private translateY = 0;
  private prevX: number;
  private prevY: number;
  private hovered = false;

  constructor(protected sanitizer: DomSanitizer) { }

  ngOnInit() {
  }

  ngOnChanges(changes) {
    if (changes.src) {
      this.scale = 1;
    }
  }

  //......

0 个答案:

没有答案