是否有已知的算法可以将 2D 图像（矩形）形成簇布局？

Question

我正在寻找与此类似的图像（正方形）布局的现有算法：

有人知道类似的事情吗？也许是一个库或只是一个描述？ 会是这样的：

• 将图像放置在 2D 空间中的某处
• 继续在其周围排列剩余图像（各种尺寸，但比第一个小）

Answer 1

这可能不完全是您想要的，但它适用于任何尺寸的矩形画布并创建无间隙布局（我是作者）。

大多数现有的布局算法都是在逐行分区的基础上工作的。在我看来，垃圾箱包装总是会给您带来间隙，并且不适合您的用例。

但是，如果您不介意自己编写代码，那么看起来并不那么复杂。

• 第一个图像到达中心并定义起始边界
• 然后您可以将图像放置在 4 个基本方向之一。每当您超过当前边的长度时，您就会继续放置下一个方向的图像。
• 对于每个放置的图像，您都会增加画布边界，因此围绕中心的下一次旅行知道图像何时超过阈值以再次切换方向。
• 冲洗并重复。

您的问题没有定义您想要在每一侧放置多少图像。在您的示例中，图像缩小了，但是是固定速率还是应该自动缩小等等。如何处理具有非常奇怪的纵横比（例如 1:10 等）的图像？

Answer 2

我最终采取的方法并不理想，但确实有效。

以上是可能的配置之一。算法如下：

• 将最大的图像放在中心
• 将第二张图片放在它旁边
• 用它制作一个多边形
• 然后对于任意数量的剩余图像执行以下操作：
• 找到最靠近中心的角
• 确保图像不与现有多边形相交
• 放置图像后，创建一个新的多边形

对于多边形创建和检查交叉点，我使用了：@flatten-js/core