Conservar la relación de aspecto al cambiar el tamaño – JavaScript – SitePoint Forums
Así que… hablemos de teoría por un minuto. Tomaré matemáticas, así que entiendo si quieres saltarte esta publicación.
Una caja se puede definir mediante 2 puntos. Específicamente, cuando define un cuadro en un navegador web, define dos puntos en la abstracción: la esquina superior izquierda (x, y) y la esquina inferior derecha (x+ancho, y+alto). Luego, el navegador puede extrapolar los lados restantes del cuadro a partir de esa información (x,y,w,h). Aquí está mi caja de demostración. Es un cuadrado, pero no importa qué rectángulo sea, lo siguiente es cierto.
Usted define la relación de aspecto como ancho/alto; De hecho, voy a definir alto/ancho como; estas son efectivamente expresiones equivalentes: w/h = 1/(h/w) … obtienes el mismo número de cualquier forma. Entonces, ¿por qué establecí su alto/ancho?
Si ha estudiado matemáticas en el sistema estadounidense, lo siguiente debería sonarle algunas campanas: voy a medir mi altura. Levantatey mi enim huir. Defino la pendiente de la recta. Y tiene sentido en nuestra imagen. Si configuro mi línea para que pase por la esquina superior izquierda del cuadro, la pendiente de la línea h/w corresponde a dibujar una línea desde la esquina superior izquierda del cuadro hasta la esquina inferior derecha del cuadro:
Aquí es donde entra en juego el cambio de tamaño. Si desea mantener su relación de aspecto, la pendiente de dicha línea no puede cambiar. Moverá una esquina del cuadro (para fines de demostración, digamos que mueve la esquina inferior derecha). Ahora hay dos formas de cambiar el tamaño del cuadro, ya que nuestra línea en realidad tiene 3 puntos bien definidos.
(“¿Tres? ¿Dónde está el tercero?”)
Si la línea divide la caja, de arriba a la izquierda a la derecha, la línea también debe pasar por el centro exacto de la caja; el punto central se puede encontrar yendo desde la esquina superior izquierda hasta la mitad de su altura y la mitad de su ancho. (Usar Paint me falla un poco aquí porque tengo que… aproximar el centro de la caja. Pero entiendes el punto).
Para demostrarlo concretamente, le daré algunos números a mi caja:
La esquina superior izquierda de Qutdum está en 40,40. La esquina inferior derecha de Qutdum es 100,100; mi relación de aspecto es 1/1 (cuadrado), por lo que mi punto medio debería ser 70,70.
Anclaje
Si movemos la esquina inferior derecha del cuadro, redefinimos nuestro cuadro; la esquina inferior derecha debe ser parte de la caja. Ahora hay dos formas (de uso común) de redefinir el cuadro: Anclaje medio y Anclaje superior izquierdo (o más bien: Anclaje desde la esquina opuesta que movió). Cuál eliges depende de ti.
Ancla por el medio
Probablemente hayas visto esto en programas de dibujo; cuando anclas en el medio, el medio de la caja permanece estacionario. Movemos la esquina inferior derecha y queremos mantener la relación de aspecto igual.
Si muevo mi esquina inferior derecha hacia afuera a lo largo de la línea, la esquina superior izquierda debe moverse la misma distancia en la dirección opuesta para mantener fijo el punto medio; si mi esquina inferior derecha se mueve de 100,100 a 120,120, mi esquina superior izquierda que comenzó en 40,40 tiene que moverse a 20,20 para mantener el punto medio en 70,70.
obtiene GIF de la web para mostrarlos. La demostración no mantiene la relación de aspecto, pero muestra el ancla desde el medio.
Anclaje superior izquierdo (esquina opuesta)
Definitivamente lo has visto: cambia el tamaño de la ventana de tu navegador y verás un ejemplo. Si muevo una esquina de la caja, la esquina opuesta será mi ancla; ese punto no se moverá. Entonces, si muevo mi esquina inferior derecha a 120,120, la esquina superior izquierda permanece en 40,40 y la del medio debería moverse; Terminará con 80.80. Mi relación de aspecto se conserva y el mundo es feliz.
(que tampoco muestra la retención de la relación de aspecto, pero muestra el tipo de ancla)
Entonces, el paso 1 será determinar qué tipo de enlace desea, ya que cambia el código y los cálculos que necesita hacer. Entonces hablamos de algo que damos por sentado…
Manteniendo la relación de aspecto
Entonces, hasta ahora hemos visto la frase “preservaremos la relación de aspecto” en términos generales. Si vuelves a nuestro cuadro:
Si movemos la esquina inferior derecha a la línea verde, estaremos bien.
Pero el ratón no se limita a la línea verde. El ratón puede ir a cualquier parte. ¿Cómo manejamos esto cuando el usuario se desplaza sobre el ISNT en la línea verde? ¿Y si está en alguna parte?
Bueno, no podemos poner la esquina allí; no tendrá la relación de aspecto correcta. Así que tendremos que cambiar una o ambas dimensiones para volver a la línea verde.
Hay varias opciones aquí. La sugerencia de Paul arriba decía, “Ignora la altura. tome el nuevo ancho, coloque la esquina en la línea verde para que el ancho esté donde está el puntero del mouse; esta es tu nueva caja.” (Este es un punto negro)
Por supuesto, puede hacer lo contrario; ignora el ancho y usa la altura; efectivamente el mismo código pero usando otras dos variables. (Este es el punto azul).
Puedes intentar ser inteligente; si el mouse está sobre la línea, use ancho; si está debajo de la línea, use la altura; es “usar la dimensión más larga”. (En mi ejemplo anterior, usaría el ancho y colocaría el punto en el punto negro)
También podría hacer un poco de matemática e intentar encontrar el punto más cercano en la línea al cursor, pero eso parece un poco abrumador. O tal vez no. Una vez más, esto depende de usted. (Este es el punto naranja).
Así que… las preguntas vuelven a ti ahora. Piense en lo que quiere que haga el código; dónde desea anclar y dónde desea terminar cuando el mouse no está en la línea de relación de aspecto. Podemos ayudar desde allí.
