javascript - 在画布上自动排列重叠的图像/矩形

Question

我希望在画布上随机排列一些给定尺寸的图像（或为简单起见，矩形）。我还希望这些图像/矩形能够稍微重叠（边缘、侧面等），即我不希望任何图像完全覆盖另一个图像。这些图像/矩形平行于 x 和 y 轴。另外，我希望图像完全适合画布区域，没有未使用的空白。

我遇到了 Bin Packing、Quadtree 等。但这些都不允许重叠。有谁知道如何实施？或者指出我正确的方向？

谢谢 ：）

Answer 1

假设指定的条件：

• 没有未使用的空白
• 轴对齐方向
• 允许重叠的边距
• 永远不要掩盖整个形象

我们可以使用 Bin Packing 或四叉树算法（或其他），但首先您要操作您的数据集。

1. 循环浏览您的图像尺寸列表
   • 决定是否应允许此图像重叠（用于调整所需的输出）
   • 增加要在首选算法（bin-pack/quadtree）中使用的维度数据（在边距内）（同时保留原始数据）
2. 使用您选择的算法处理数据
3. 对 z 顺序/渲染顺序进行排序（随机排序、按区域排序等）
4. 使用原始尺寸数据渲染图像 - 确保使用区域中心的原点，而不是角落

本质上，在安排集合之前决定给定图像的重叠。

我可以想到两个限制：

1. 最小图像尺寸基于您允许的最大重叠。
   • 这可以通过按渲染顺序从大到小排序来解决。
2. 根据您对图像的排序方式和画布的大小，您的图像可能无法填满画布 - 垃圾箱包装可能会留下一些空隙。
   • 这可能可以通过更复杂的算法来解决——我对它们的了解还不够多。
   • 您也许可以缩放图像以填充该区域 - 再说一次，我对这个区域知之甚少。