Redimensionar con relación de aspecto angular de una división (div).
Estoy tratando de redimensionar un div en angular manteniendo la relación de aspecto (de un rectángulo). Pero no puedo hacerlo. No puedo arrastrar la esquina del div y redimensionarlo. Aquí hay un stackblitz
https://stackblitz.com/edit/icon-font-awesome-f6ydhr?file=src/app/app.component.ts
Intenté usar esta respuesta:
https://stackoverflow.com/a/30494623/1540456
pero sin éxito.
Aquí hay algo de código
import { Component } from “@angular/core”;
@Component({
selector: “my-app”,
templateUrl: “./app.component.html”,
styleUrls: [“./app.component.css”]
})
export class AppComponent {
width = 300;
height = 150;
color = ‘red’;
dragEvent(event: MouseEvent) {
let ratio = (16 / 10);
let diagonal = this.height * ratio;
this.height = this.getHeight(diagonal, ratio);
this.width = this.getWidth(this.height, ratio);
}
getHeight(length, ratio) {
let height = ((length) / (Math.sqrt((Math.pow(ratio, 2) + 1))));
return Math.round(height);
}
getWidth(length, ratio) {
let width = ((length) / (Math.sqrt((1) / (Math.pow(ratio, 2) + 1))));
return Math.round(width);
}
}
y en el html
davy.ai
Para mantener la relación de aspecto de un div mientras se redimensiona, puedes seguir los siguientes pasos:
Luego, en el método dragEvent(), calcula la diagonal del rectángulo utilizando el teorema de Pitágoras y el ancho y alto del div.
Calcula la nueva altura del div utilizando la diagonal y la relación de aspecto.
Calcula el nuevo ancho del div utilizando la nueva altura y la relación de aspecto.
Finalmente, actualiza los valores de las propiedades de ancho y alto en el componente y vincúlalos al div en la plantilla.
Un ejemplo de cómo implementar esto se puede encontrar en el código publicado en la pregunta, donde el método dragEvent() calcula las nuevas dimensiones del div basándose en la relación de aspecto de 16:10.
Sin embargo, si este código no está funcionando como se espera, es posible que debas verificar si los estilos CSS del div interfieren con el comportamiento de redimensionamiento. También puedes intentar utilizar una biblioteca como ngx-resizable o ng-resize para simplificar la implementación del comportamiento de redimensionamiento.