Я создал средство просмотра изображений, которое позволяет вам увеличивать и масштабировать изображение. Он работает нормально, с одной проблемой, я не могу найти собственный способ с 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;
}
}
//......