Algorithm 在窗口中是否有自动调整和分布正方形/矩形的算法？

我试图找到这样一个算法，但到目前为止我没有成功，我希望你能帮助我。提前谢谢

所以我的问题是：我有一张画布。通过单击按钮，我可以创建一个矩形。当我有一个矩形时，它被绘制成占据画布的大部分。当我再次按下它时，会出现一个新的矩形，然后两个矩形会被重新绘制，以占据每一个几乎一半的可用画布。然后创建第三个矩形，三个矩形分布在两行中，以便在每个矩形的长度和宽度之间保持一定的比例，尽可能多地占用画布。对于n个矩形，依此类推，请参见图：

有没有什么著名的算法可以实现这一点

---

谢谢大家!

您的矩形大小都相同，因此您的任务是为布局找到最佳行数和列数。布局由一个边界矩形、矩形数量k和首选宽高比α*加上矩形之间的间隙d组成：

const box = {
    count: 7,
    alpha: 1.2,
    gap: 8,
    nrow: 0,        // to be determined ...
    ncol: 0,        // ...
    width: 0,       // ...
    height: 0,      // ...
};

一个非常简单的算法将根据输入找到列数m的第一个猜测，然后尝试数m以找到最大面积，同时保持合理的纵横比

你的总面积是A=W·H。一个盒子的面积是A=W·H或A=H/α，其中α=W/H。理论最大面积（如果间隙为0）为A*=A/k，其中k为矩形数。您可以使用它来估计w的第一个猜测，从而估计列数m

我们优化的“分数”是面积，它必须最大化。为了不允许出现令人不快的纵横比，我们通过将分数除以误差平方（α）来合并当前纵横比α− α*）²

以下是一种实现方法：

function layout(canvas) {
    let A = canvas.width * canvas.height;
    let a = A / box.count;
    let x = Math.sqrt(a * box.alpha);
    let m = (canvas.width / x) | 0 - 2;

    if (m < 1) m = 1;

    let best = 0.0;

    for (;;) {
        let n = (((box.count - 1) / m) | 0) + 1;
        let w = (canvas.width - (m - 1) * box.gap) / m;  
        let h = (canvas.height - (n - 1) * box.gap) / n;

        if (h < 0) h = 0;
        if (w < 0) w = 0;

        let alpha = w / h;
        let area = box.count * (w + box.gap) * (h + box.gap);
        let dalpha = alpha - box.alpha;
        let score = area / (dalpha * dalpha);

        if (score < best) break;

        box.width = w;
        box.height = h;
        box.ncol = m;
        box.nrow = n;

        best = score;
        m++;
    }
}

功能布局（画布）{
设A=canvas.width*canvas.height；
设a=a/box.count；
设x=Math.sqrt（a*box.alpha）；
设m=（canvas.width/x）| 0-2；
如果（m<1）m=1；
设best=0.0；
对于（；；）{
设n=（（box.count-1）/m）| 0）+1；
设w=（canvas.width-（m-1）*box.gap）/m；
设h=（canvas.height-（n-1）*box.gap）/n；
如果（h<0）h=0；
如果（w<0）w=0；
设α=w/h；
让面积=box.count*（w+box.gap）*（h+box.gap）；
设dalpha=alpha-box.alpha；
let分数=面积/（dalpha*dalpha）；
如果（得分<最佳）突破；
box.width=w；
box.height=h；
box.ncol=m；
box.nrow=n；
最佳=分数；
m++；
}
}

---

当然还有改进的余地，比如在猜第一枪的时候。你可以在jsbin上找到它。

听起来像：

bin打包问题，所以只需谷歌一下这个词（我添加了标签）。。。这里有一个简单的相关QA示例Yes@Spektre，这似乎是一个很好的搜索起点。非常感谢。伟大的非常感谢你！这与我不得不面对这个问题的想法是一致的。再次感谢你