Erstellen Sie ein optimales Raster basierend auf N-Elementen, Gesamtfläche und H: W-Verhältnis

Question

Ich erstelle eine Anwendung, die eine Anzahl von gleich großen Rechtecken nimmt und sie in einem Raster auf dem Bildschirm positioniert. Ich habe den Großteil der Logik für das Ändern der Größe und das Zentrieren eines Rechtecks ​​in einer Zelle abgeschlossen, aber ich habe Probleme mit dem tatsächlichen Teil, der das Raster definiert, dem die Rechtecke entsprechen müssen.

Idealerweise am Ende würde ich eine Funktion haben, wie diese (Pseudocode):

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

Meine ursprüngliche Stich an dieser beteiligt etwas wie folgt aus:

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

Diese funktionieren würde schön, wenn meine Artikel alle perfekte Quadrate waren, aber da sie Rechtecke sind, gibt es viel ungenutzten Leerraum in jeder Zelle.

Irgendwelche Gedanken oder Begriffe zu Google, die mir in die richtige Richtung zeigen könnten?

Answer 1

Ich bin ein wenig unklar bei einigen Ihrer Eingabeparameter, aber ich nehme an, dass Sie Rechteck Höhe und Breite, die Anzahl der Rechtecke und das ideale Höhe-Breite-Verhältnis (dh bevorzugte Gitterhöhe/Gitterbreite).

Wenn dies der Fall ist, würde ich wahrscheinlich beginnen, indem Sie Ihre Dimensionen "normalisieren", so dass wir für die folgenden Berechnungen sagen, dass eine Einheit der Breite die gleiche wie die Breite eines Rechtecks ​​und ebenso für eine Einheit ist von Höhe. Wenn Ihr Verhältnis von Höhe zu Breite in realen Einheiten k ist, dann wäre Ihr Verhältnis Höhe/Breite in Rectange-Einheiten k * RectWidth/RectHeight. Ich nenne das K.

Also jetzt hat jedes Rechteck per Definition eine Fläche von 1, so dass unsere Gesamtfläche N ist, wobei N die Anzahl der Elemente ist. Wir können dann unsere Höhe addieren Breite approximieren, um uns unser bevorzugtes Gitter-Seitenverhältnis zu geben, indem wir sagen gridHeight * gridWidth = N und gridHeight/gridWidth = K

Mit diesen erhalten wir gridHeight = sqrt (KN) und gridWidth = sqrt (N/K).

Wenn Sie eine von diesen auf eine passende ganze Zahl runden (Ich bin mir nicht sicher, ob der nächste Wert einer ganzen Zahl gerundet ist, gibt Ihnen das beste Ergebnis oder wenn die Rundung die kleinste prozentuale Änderung in diesem Wert ergibt Am besten - Sie können immer alle vier ausprobieren, wenn Ihnen das so wichtig ist. Sobald Sie einen ganzzahligen Wert haben, berechnen Sie den anderen, indem Sie die kleinste ganze Zahl finden, die die andere multiplizieren kann und immer noch größer als N ist, um sicherzustellen, dass Sie alle Rechtecke in das Gitter passen.

Sie können natürlich Ihre Integer-Werte wieder in echte umwandeln, indem Sie die Höhe mit rectHeight und die Wdith mit RectWidth multiplizieren.

Hoffentlich macht das alles Sinn. :)

bearbeitet gearbeitet Beispiel:

Erforderliche letztes Raster Seitenverhältnis = 1024/768 (k) (geht davon aus, dass 768 Breite und 1024 ist in der Höhe - Ich hielt will es in die andere Richtung setzen um deshalb als Standard-Bildschirmauflösung :))

"normalisiert" Seitenverhältnis = (1024/768) * (300/109) = 3,6697 (K)

Gitterhöhe ist sqrt (KN) = sqrt (366,97) = 19.16

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

Wenn wir das betrachten, sehen wir intuitiv, dass Breite 5 und Höhe 20 unsere beste Übereinstimmung sein werden. Die anderen Optionen können 6 und 19 sein. Aber das wird mehr Platz verschwenden (ich denke, möglicherweise tatsächlich das Produkt der Breite und Höhe hier zu minimieren migth die beste Berechnung sein, aber ich bin mir nicht sicher).

Dies ist jetzt unsere Gittergröße in Zellen. Dies skaliert dann bis zu Pixel-Dimensionen von 1500 bis 2180. Die Skalierung nach unten, um in 768 × 1024 zu passen, bedeutet, beide durch 2,129 zu teilen (der größere von 1500/768 und 2180/1024). Ihre Bilder werden also 2.129 mal auf 141x51 (ish) herunterskaliert und Ihr gesamter verwendeter Bereich wird 705x1020 sein, was minimalen Leerraum ergeben sollte.

Hoffentlich macht das jetzt mehr Sinn. Ich gebe zu, ich bin ein paar Mal falsch gelaufen, als ich echte Werte eingegeben habe, und ich verstehe vollkommen, warum Sie ein funktionierendes Beispiel wollten. ;-)