Crear una cuadrícula óptima basada en n elementos, área total y relación H: W

Question

Estoy creando una aplicación que toma varios rectángulos del mismo tamaño y los coloca en una cuadrícula en la pantalla. Tengo la mayor parte de la lógica completa para redimensionar y centrar un rectángulo dentro de una celda, pero estoy teniendo problemas con la parte real que define la cuadrícula a la que deben ajustarse los rectángulos.

Lo ideal es que al final me tendría una función como esta (pseudo-código):

function getGridDimensions (rect surface, int numItems, float hwRatio) { 
    // do something to determine grid-height and grid-width 
    return gridDimensions; 
} 

Mi arma blanca original, en este involucrado algo como esto:

gridHeight = surface.width/sqrt(numItems); 
gridWidth = surface.height/sqrt(numItems); 

Esto funcionaría muy bien si mis artículos eran todos cuadrados perfectos, pero como son rectángulos, hay un montón de espacio en blanco sin usar dentro de cada celda.

¿Pensamientos o términos para Google que podrían apuntar en la dirección correcta?

Answer 1

No estoy seguro de algunos de los parámetros de entrada, pero supongo que tiene la altura y el ancho del rectángulo, el número de rectángulos y la relación altura-anchura ideal (es decir, rejilla de preferencia/ancho de malla).

Si este es el caso, entonces probablemente comience por "normalizar" sus dimensiones, por lo que para los siguientes cálculos decimos que una unidad de ancho es igual al ancho de un rectángulo y lo mismo para una unidad de altura Si su relación altura/ancho en unidades reales era k, entonces su relación altura/ancho en unidades Rectange sería k * RectWidth/RectHeight. Llamaré a esto K.

Así que ahora cada rectángulo, por definición, tiene un área de 1, por lo que nuestra área total es N, donde N es el número de elementos. Entonces podemos aproximar nuestra anchura de ancho de altura para obtener nuestra relación de aspecto de grilla preferida diciendo gridHeight * gridWidth = N y gridHeight/gridWidth = K

Con estos obtenemos gridHeight = sqrt (KN) y gridWidth = sqrt (N/K).

Si redondea uno de estos a un número entero adecuado (no estoy seguro si lo que esté más cerca un número entero redondeado le dará el mejor resultado o si el redondeo le dará el menor porcentaje de cambio en ese valor lo mejor, siempre puedes probar los cuatro si te importa tanto). Una vez que tiene un valor entero, calcule el otro encontrando el entero más pequeño que pueda multiplicar el otro y que sea mayor que N para asegurarse de que se ajusta a todas las rejillas en la cuadrícula.

Puede, por supuesto, cambiar sus valores enteros a los reales multiplicando la altura por rectHeight y la wdith por RectWidth.

Afortunadamente, todo tiene sentido. :)

Editar por ejemplo trabajado:

relación de aspecto rejilla final requerido = 1024/768 (k) (se supone que 768 es ancho y 1024 es la altura - I quedé con las ganas de ponerlo al revés como una resolución de pantalla estándar :))

relación de aspecto "normalizado" = (1024/768) * (300/109) = 3,6697 (K)

por lo tanto

cuadrícula altura es sqrt (KN) = sqrt (366,97) = 19.16

Grid Wi dth es sqrt (N/K) = 5.22

Al ver esto, podemos ver intuitivamente que el ancho 5 y el alto 20 serán nuestra mejor combinación. Las otras opciones podrían ser 6 y 19. Pero eso desperdiciará más espacio (creo que posiblemente la minimización del producto de ancho y alto aquí puede ser el mejor cálculo, pero no estoy seguro).

Este es ahora nuestro tamaño de cuadrícula en celdas. Esto luego se amplia hasta las dimensiones de píxeles de 1500 por 2180. Escalar hacia abajo para caber en 768x1024 significa dividir ambos por 2.129 (el más grande de 1500/768 y 2180/1024). Por lo tanto, sus imágenes se reducirán 2.129 veces hasta 141x51 (ish) y su área total utilizada será de 705x1020, lo que debería dar un espacio en blanco mínimo.

Afortunadamente eso tiene más sentido ahora. Admito que me equivoqué algunas veces al poner valores reales, así que entiendo totalmente por qué querías un ejemplo trabajado. ;-)