1

最终编辑：成功！

正如我之前在迈克尔回答下方的评论中所述，我没有考虑到我将行数乘以正方形的宽度这一事实。

调整画布大小和排列这些正方形的完整正确公式如下： 

var canvasWidth = squareWidth * Math.ceil(Math.sqrt(numberOfSquares));

var canvasHeight = squareHeight * Math.ceil(numberOfSquares / (Math.ceil(Math.sqrt(numberOfSquares))));

原帖：

我曾经知道这一点，而且我忽略了一些简单的事情，但是我现在已经在这件事上花了两个小时，这让我发疯了！

假设我在 HTML5 中有一个 canvas 元素，并且我有四个图像/正方形（大小都相同）：

[ ][ ][ ][ ]

我现在只知道它们的宽度/高度和我拥有的正方形的数量。

当我像这样排列它们时，将画布设置为这些正方形大小的公式是什么：

[ ][ ]

[ ][ ]

为了清楚起见，我想知道会有多少列，会有多少行以及包裹它们的画布的宽度/高度。

编辑：我忘了提到我正试图让他们获得二的力量。所以，2,4,8,16,24..etcetc 我意识到会有空格，我不在乎它们我只是想调整画布的大小以容纳两边相等的行

我忘记的方程对任意数量的平方进行排序，无论是奇数、偶数还是只有 1

我以为是这样的：

var canvasWidth = (squareWidth*howManySquares)/2;
var canvasHeight = (squareHeight*howManySquares)/2;

这在一定程度上有效，但 /2 将只有 1 个正方形的一半画布。我想我ceil()在某个时候尝试过，但我现在完全糊涂了。

提前感谢您提供的任何帮助。

编辑2：

感谢 Michael Lawrie，我离答案越来越近了。

为了更清楚我所追求的（因为我忘记了不止一种方法。）我想要迈克尔劳里的第二个建议，在那里我找出我可以整齐地分割正方形多少次来制作一个方形的矩形画布，以尝试删除尽可能多的空插槽。

他的答案是正确的，但他忘记包括正方形宽度，如下所示：

 canvasWidth = squareWidth * Math.ceil(Math.sqrt(howManySquares));

这个有效（我认为？到目前为止我只测试了小数字。如果我错了请纠正我）但它只是宽度。

我现在很难找到高度。复制宽度版本boxHeight不起作用（如预期的那样），我在调整迈克尔劳里的版本时的拙劣尝试也没有产生任何结果。

所以我还是卡住了。到目前为止，我感谢您的帮助，几乎得到了它！

4

1 回答 1

3

假设你总是想要一个正方形，即使那个正方形没有满，宽度和高度都应该是Math.ceil(Math.sqrt(number_of_squares)). 如果你想要一个边不相等的矩形，它会稍微复杂一些：

var long_side = Math.ceil(Math.sqrt(number_of_squares));
var short_side = Math.ceil(number_of_squares / long_side);

这为您提供了画布的正方形大小。乘以方块的像素尺寸以获得画布的最终尺寸。

于 2013-06-11T15:48:17.283 回答