Creé un componente de vista de imagen con botones para rotar, acercar y alejar. Cuando hace clic en un botón, agrega transform CSS a la imagen.
Por alguna razón, cuando hago zoom en la imagen, no puedo desplazarla hasta la esquina superior o izquierda. Traté de agregar transform-origin: top left; a la imagen, y corrige el zoom, sin embargo, rompe la rotación. ¿Cómo puedo solucionar este problema?
Puedes ver mi código aquí https://codesandbox.io/s/delicate-star-eitj3s?file=/src/app/app.component.ts
EDITAR: transform-origin: top left; hace que la imagen se adhiera a la esquina superior izquierda, pero necesito mantener la imagen en el centro. ¿Es posible arreglar el desplazamiento y mantener el origen de las transformaciones de la imagen en el centro?
tienes razón.transform-origin: arriba a la izquierda; es la solución Ponga la condición en su método transformImage como se muestra a continuación y pase verdadero/falso
private transformImage(zoom): void { this.renderer.setStyle( this.image.nativeElement, "transform", `rotate(${this.angle}deg) scale(${this.scale})` ); if (zoom) { this.renderer.setStyle( this.image.nativeElement, "transform-origin", `top left` ); }}
rotate(): void { this.angle = this.angle + 90; this.transformImage("rotate"); } private transformImage(transformType?: string): void { switch (transformType) { case "rotate": this.renderer.setStyle( this.image.nativeElement, "tranform-origin", "center center" ); break; default: this.renderer.setStyle( this.image.nativeElement, "tranform-origin", "top left" ); break; } this.renderer.setStyle( this.image.nativeElement, "transform", `rotate(${this.angle}deg) scale(${this.scale})` ); }Podemos usar alto y ancho para hacer zoom y transformar para rotar. Con display:flex se puede mantener en el centro. Manifestación
.image-viewer { display: flex; overflow: auto; width: 100%; height: 100%; border: 1px solid black; } .image-viewer img { margin:auto; width: 70%; height: 70%; transition: 0.3s; } .image-controls { width: 100%; text-align: center; } .image-controls button { transition: opacity 0.2s; opacity: 0.8; &:hover { opacity: 1; } } private transformImage(): void { this.renderer.setStyle( this.image.nativeElement, "transform", `rotate(${this.angle}deg)` ); this.renderer.setStyle( this.image.nativeElement, "width", `${100 * this.scale}%` ); this.renderer.setStyle( this.image.nativeElement, "height", `${100 * this.scale}%` ); /*this.image.nativeElement.scrollIntoView({ behavior: "smooth", inline: "center", block: "start" });*/ }