创建基于正项目，总面积和H最佳格：W比例 [英] Create an optimal grid based on n-items, total area, and H:W ratio

问题描述

我创建一个应用程序，采用了一些同样大小的矩形和他们在屏幕上的网格位置。我大部分的逻辑完全调整大小和小区内的中心矩形，但我有与定义网格的实际部分的麻烦矩形必须符合。

I'm creating an application that takes a number of equally sized rectangles and positions them in a grid on the screen. I have most of the logic complete for resizing and centering a rectangle within a cell but I'm having trouble with the actual portion that defines the grid the rectangles must conform to.

在理想情况下，在最后我有一个这样的函数（伪code）：

Ideally, in the end I'd have a function like this (pseudo-code):

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

目前参与这样的事情我原来的刺：

My original stab at this involved something like this:

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

这将很好地工作，如果我的物品都是完美的正方形，而是因为他们是长方形有每个小区内有很多未使用的空白。

This would work nicely if my items were all perfect squares, but since they're rectangles there is a lot of unused white space within each cell.

任何想法或条款，谷歌认为可以点我在正确的方向？

Any thoughts or terms to Google that could point me in the right direction?

推荐答案

我对你的一些输入参数有点不清楚，但我假设你有矩形的高度和宽度，矩形的数量和理想的高度 - 宽度比（即preferred gridheight / gridwidth）。

I'm a bit unclear on some of your input parameters but I'm assuming that you have Rectangle height and width, the number of rectangles and the ideal height-width ratio (ie preferred gridheight/gridwidth).

如果是这样的话，那么我可能是由开始正常化您的尺寸，以便为后面的计算的目的，我们说宽度的单元是相同的一个矩形的宽度和同样为一个单位高度。如果在实际单位的高度/宽度比为10k，则在Rectange单位的高度/宽度比为K * RectWidth / RectHeight。我会打电话给这个ķ。

If this is the case then I'd probably start off by "normalizing" your dimensions so for the purpose of the following calculations we say a unit of width is the same as the width of a rectangle and likewise for a unit of height. If your height/width ratio in real units was k then your height/width ratio in Rectange units would be k*RectWidth/RectHeight. I'll call this K.

所以，现在每个矩形通过定义具有为1的区域，这样我们的总面积是N，其中N是项数。然后，我们可以近似我们的高度增加宽度给自己了preferred电网的宽高比说gridHeight * gridWidth = N和gridHeight / gridWidth = K

So now each rectangle by definition has an area of 1 so our total area is N where N is the number of items. We can then approximate our height add width to give ourselves our preferred grid aspect ratio by saying gridHeight*gridWidth = N and gridHeight/gridWidth = K

有了这些，我们得到gridHeight =开方（KN）和gridWidth =开方（N / K）。

With these we get gridHeight = sqrt(KN) and gridWidth = sqrt(N/K).

如果你一轮的这些一关到一个合适的整数（我不知道ifwhichever最接近圆形会给你最好的结果，或者如果它取四舍五入会给最小的百分比变化的值是最好的一个整数 - 你可以尝试所有四个，如果你在乎这个）。一旦你有一个整数值你再计算其他被发现的最小整数能multipy对方，并且仍然大于N，以确保你适合在网格中的所有rectanges）。

If you round one of these off to a suitable whole number (I'm not sure ifwhichever is nearest a whole number rounded will give you the best result or if its whichever rounding will give the smallest percentage change in that value is best - you can always try all four if you care that much). Once you have one integer value you then calculate the other by finding the smallest integer that can multipy the other and still be greater than N to make sure you fit all rectanges in the grid).

您可以的话当然由乘rectHeight的高度和wdith通过RectWidth回改变你的整数值以假乱真。

You can then of course change your integer values back to real ones by multiply the height by rectHeight and the wdith by RectWidth.

希望这一切是很有意义的。 ：）

Hopefully that all makes sense. :)

修改的样例：

必需的最后一格纵横比为768分之1024（K）（假设768的宽度和1024的高度 - 我一直希望把它周围的其他方法作为标准屏幕分辨率:)）

Required final grid aspect ratio = 1024/768 (k) (assumes that 768 is width and 1024 is height - I kept wanting to put it the other way around as a standard screen resolution :) )

正常化的纵横比=（768分之1024）*（一百〇九分之三百）= 3.6697（K）

"Normalised" aspect ratio = (1024/768) * (300/109) = 3.6697 (K)

电网高度因此开方（KN）=开方（366.97）= 19.16

Grid Height therefore is sqrt(KN) = sqrt(366.97) = 19.16

网格宽度为开方（N / K）= 5.22

Grid Width is sqrt(N/K) = 5.22

看着这一点，我们可以看到直观的宽度5和20的高度将是我们的最佳匹配。其他选项可能是6和19。但是，这会浪费更多的空间（我想可能实际上减少的宽度和高度的产品在这里migth是最好的计算，但我不知道）。

Looking at this we can see intuitively that width 5 and height 20 will be our best match. The other options might be 6 and 19. But that will waste more space (I think possibly actually minimizing the product of the width and height here migth be the best calculation but I'm not sure).

这是现在我们在细胞网格大小。这就可以扩展到1500像素尺寸为2180缩小以适合768x1024手段都是由2.129分（的768分之1500和一千○二十四分之二千一百八十较大）。所以，你的图像将缩小以2.129倍为141x51（ISH）和你的总面积使用的实际上是705x1020应给予最小的空白。

This is now our grid size in cells. This then scales up to pixel dimensions of 1500 by 2180. Scaling down to fit in 768x1024 means dividing both by 2.129 (the larger of 1500/768 and 2180/1024). So your images will scale down by 2.129 times to 141x51(ish) and your total area used will actually be 705x1020 which should give minimal whitespace.

希望这更有意义了。我得承认，我想歪了几次把真正的价值观，所以我完全理解你为什么想要一个工作的例子。 ; - ）

Hopefully that makes more sense now. I'll admit, I went wrong a few times putting real values in so I totally understand why you wanted a worked example. ;-)

这篇关于创建基于正项目，总面积和H最佳格：W比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！