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

8

Ich erstelle eine Anwendung, die eine Anzahl von gleich großen Rechtecken aufnimmt 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 ​​innerhalb einer Zelle abgeschlossen, aber ich habe Probleme mit dem tatsächlichen Teil, der das Gitter definiert, dem die Rechtecke entsprechen müssen.

Idealerweise hätte ich am Ende eine solche Funktion (Pseudocode):

%Vor%

Mein ursprünglicher Einschlag beinhaltete so etwas:

%Vor%

Das würde gut funktionieren, wenn meine Objekte alle perfekte Quadrate wären, aber da sie Rechtecke sind, gibt es in jeder Zelle viel ungenutzten Leerraum.

Irgendwelche Gedanken oder Begriffe an Google, die mich in die richtige Richtung weisen könnten?

    
sevenflow 18.08.2010, 14:22
quelle

1 Antwort

13

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

Wenn das der Fall ist, würde ich wahrscheinlich damit anfangen, Ihre Dimensionen zu "normalisieren". Wir meinen daher, dass eine Einheit der Breite die gleiche ist wie die Breite eines Rechtecks ​​und ebenso für eine Einheit 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 werde das K nennen.

Nun hat also jedes Rechteck definitionsgemäß eine Fläche von 1, also ist unsere Gesamtfläche N, wobei N die Anzahl der Elemente ist. Wir können dann unsere Höhe addieren, um uns unser bevorzugtes Gitternetz-Seitenverhältnis zu geben, indem wir gridHeight * gridWidth = N und gridHeight / gridWidth = K

sagen

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

Wenn Sie eine davon auf eine passende ganze Zahl runden (Ich bin mir nicht sicher, ob dasjenige, das einer gerundeten ganzen Zahl am nächsten ist, Ihnen das beste Ergebnis bringt oder ob die kleinste Rundung die kleinste prozentuale Änderung in diesem Wert ergibt - 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 im Gitter anpassen.)

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

Hoffentlich macht das alles Sinn. :)

Bearbeiten für bearbeitetes Beispiel:

Erforderliches finales Gitter-Seitenverhältnis = 1024/768 (k) (unter der Annahme, dass 768 die Breite und 1024 die Höhe ist - ich wollte es als Standard-Bildschirmauflösung anders herum darstellen :))

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

Rasterhöhe ist daher sqrt (KN) = sqrt (366.97) = 19.16

Rasterweite ist sqrt (N / K) = 5.22

Wenn wir dies betrachten, können wir intuitiv sehen, dass Breite 5 und Höhe 20 unsere beste Übereinstimmung sein werden. Die anderen Optionen könnten 6 und 19 sein. Aber das wird mehr Platz verschwenden (ich denke, möglicherweise tatsächlich das Produkt der Breite und Höhe zu minimieren hier 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. ; -)

    
Chris 18.08.2010, 15:09
quelle

Tags und Links