根据 n 项、总面积和 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.

理想情况下，最后我会有这样的函数(伪代码):

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.

对 Google 有什么想法或条款可以为我指明正确的方向吗?

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

推荐答案

我对你的一些输入参数有点不清楚，但我假设你有 Rectangle 的高度和宽度，矩形的数量和理想的高度-宽度比率(即首选网格高度/网格宽度).

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).

如果是这种情况，那么我可能会从规范化"您的尺寸开始，因此出于以下计算的目的，我们说宽度单位与矩形的宽度相同，同样对于单位高度.如果实际单位的高/宽比为 k，那么矩形单位的高/宽比将为 k*RectWidth/RectHeight.我称它为 K.

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 是项目数.然后，我们可以通过说 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 = sqrt(KN) 和 gridWidth = sqrt(N/K).

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

如果您将其中一个四舍五入到一个合适的整数(我不确定哪个最接近整数四舍五入会给您最好的结果，或者它的哪个四舍五入会给出该值的最小百分比变化是最好的- 如果您非常在意，您可以随时尝试所有四个).一旦你有了一个整数值，你就可以通过找到可以乘以另一个并且仍然大于 N 的最小整数来计算另一个，以确保你适合网格中的所有矩形).

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. :)

编辑工作示例:

所需的最终网格纵横比 = 1024/768 (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 :) )

标准化"纵横比 = (1024/768) * (300/109) = 3.6697 (K)

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

因此网格高度为 sqrt(KN) = sqrt(366.97) = 19.16

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

网格宽度为 sqrt(N/K) = 5.22

Grid Width is sqrt(N/K) = 5.22

看到这个我们可以直观地看到宽度 5 和高度 20 将是​​我们的最佳匹配.其他选项可能是 6 和 19.但这会浪费更多空间(我认为实际上可能在这里最小化宽度和高度的乘积可能是最好的计算，但我不确定).

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 x 2180 的像素尺寸.缩小以适应 768x1024 意味着将两者除以 2.129(1500/768 和 2180/1024 中的较大者).因此，您的图像将按比例缩小 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. ;-)

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