我创建了一个图像查看器,使您可以缩放和拖动图像。正常运行,有一个问题,当更改图像源时,我无法找到使用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;
}
}
//......