有很多约束的Javascript Packing，寻找一个简单的解决方案 [英] Javascript Packing with many constraints, looking for a simple solution

问题描述

这不是完全打包，因为我可以自己分配矩形大小，我只需要打包结果. 我有相同比率和不同大小的矩形
完整，
半(面积= 1/4 *满)，
季度(面积= 1/4 *半)
全部将仅水平放置. 容器的宽度是FULL的3倍，高度将调整为适合矩形.

This is not exactly packing as I can assign rectangle sizes myself, I just need a packed result. I have rectangles of same ratio and different sizes
FULL,
HALF(area = 1/4 * FULL),
QUARTER(area = 1/4 * HALF).
All will be positioned horizontally only. The container is of width 3 times FULL and height will adjust to fit rectangles.

将有150个矩形，它们将从数组(完整，半个，四分之一)中随机分配大小.现在，我想将这些矩形排列在容器中，以便没有间隙.

There will be 150 rectangles which will be given random sizes from array(full,half,quarter). Now I want to arrange these rectangles in the container so that there is no gap.

容器和矩形是HTML DIV.我正在使用JavaScript打包它们.

The container and rectangles are HTML DIVs. I am using JavaScript to pack them.

这是一个小提琴 http://jsfiddle.net/MywQ2/1/

在上面的代码中，我试图根据当前框来限制对下一个框的选择.
可能我不清楚，我将尝试再次解释.我有150箱，我只想用150箱装满容器，它们的大小应为满，半，四分之一.我们也可以拒绝随机选择的尺寸，如果发现它会造成缝隙，则获得另一个尺寸.

In the above code I tried to constrain the selection of next box depending on present one.
May be i am not clear, i will try to explain again. I have 150 boxes, i just want to fill container with 150 boxes, they should be randomly of size full,half,quarter. We can also reject randomly selected size and get another one if it is found to create gap.

推荐答案

我认为您要么想要一些不可能的东西，要么您将其表述为错误.如果选择真正随机的矩形，最终将在容器中留下间隙.

I think you either want something impossible or you formulate it wrong. If you pick your rectangles truly random, you will end up with gaps in your container.

在示例代码中，您现在选择了半随机的，因为它取决于status的模数.

In the sample code you have now you pick them semi-random, as it depends on the modulus of status.

如果您的目标是用看似随机的矩形填充容器，那么下一个算法可能对您有用(peude代码):

If your goals is to fill the container with seemingly random rectangles, maybe next algorithm works for you (peude code):

for rectangle in ['large', 'medium', 'small']:
    try:
        place_rectangle_randomly_in_container(rectangle)
    except NoFreeSpace:
        if rectangle == 'small':
            # container filled
            break

其中place_rectangle_randomly_in_container尝试将矩形随机放置在容器中的任何位置.

where the place_rectangle_randomly_in_container tries to put the rectangle anywhere in the container at random.

要实现放置，请使用二维数组(表示该位置是否仍然可用)跟踪容器.数组中的每个元素都代表一个小矩形将要填充的空间，因此，如果容器可以包含12x12个小矩形，那将是数组的尺寸.要检查中等矩形是否适合[2,3]，您需要检查[2,3]，[2,4]，[3,3]和[3,4]的数组.

To implement the placement, keep track of the container with a 2-dimensional array of booleans which indicate if that spot is still free; every element in the array represents the space a small rectangle would fill, so if the container can contain 12x12 small rectangles, that would be the dimension of the array. To check if a medium rectangle would fit at [2,3], you need to check the array for [2,3], [2,4], [3,3] and [3,4].

然后通过放置矩形而不是向左浮动矩形来放置矩形.

Placing the rectangles is then done by positioning them instead of floating them left.

这篇关于有很多约束的Javascript Packing，寻找一个简单的解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！