网格视图高度/宽度公式

时间:2012-07-29 13:16:18

标签: javascript design-patterns math

我有一个矩形区域,我想要适应不同数量的sqaure项目。这是一个帮助解决问题的图片。

enter image description here

有人可以用公式来帮我计算物品的宽度/高度(Bw / Bh)吗?

我试过√(WxH / N)。

但是以W = 1400,H = 380,N = 16为例给出了182.但1400/182只给出了7.7个盒子宽度和2.08个高度(乘以我得到的16个,但是我需要它们才能适应该地区)。

有什么想法吗?

编辑:

越来越近我认为我真正需要知道的是基于宽高比以及如何计算出适合项目的网格。例如。 254 x 133以下的16个盒子是6乘3。

enter image description here

编辑:

我现在编写了以下代码来计算网格(javascript)。问题是它正在使用跟踪和错误方法。

var W = 254,
    H = 133,
    N = 16,
    Bh = H;

while( ((Math.floor(W/Bh)) * (Math.floor(H/Bh))) < N ){
    Bh--;            
}

alert('Columns: '+Math.floor(W/Bh)+', Rows: '+Math.floor(H/Bh)+', Bow width: '+(Bh) );

请参阅http://jsfiddle.net/GVp4X/以测试代码。我仍然确定有更好的方法。

1 个答案:

答案 0 :(得分:1)

您应该为(小)框的宽高比定义一些有意义的约束。例如,你总是可以将大盒子纵向或横向分成N个部分,但我认为这不是你想要做的。对于素数N,这是你唯一能做的事情。在这种情况下可以添加空格的“填充”吗?

编辑:

如果N相当小,你可以循环遍历所有可能的w,每行的盒子数量,并最小化一些适当的惩罚函数,用于错误的宽高比和未使用的盒子数量。这是一个例子(在Matlab代码中)

N = 123;
target_aspect = 4/3;
W = 80;
H = 60;

min_F = inf;
for w=1:N,
   h = ceil(N/w);
   Bh = H/h;
   Bw = W/w;

   padding = h*w-N;
   aspect = Bw / Bh;

   %# The penalty function to minimize
   F = abs(aspect-target_aspect) + padding * 0.05;

   if F < min_F,
       min_F = F;
       best_w = w;        
   end
end

EDIT2:

如果允许空白空间(“ypadding”),例如在底部边缘,也可以使用固定的宽高比进行此操作。那么循环体可能就像

Bw = W/w;
Bh = Bw/aspect;
h = floor(H/Bh);

n = w*h;

if n >= N,
   ypadding = H-Bh*h;
   padding = h*w-N;

   %# penalty function
   F = (ypadding/Bh)*0.3 + (padding / w)*0.2

   if F < min_F,
      min_F = F;
      best_w = w;
   end        
end

在这种情况下,通过求解二次问题也可以减少w的搜索范围。