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

Question

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

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

谢谢:)

Answer 1

假设指定的条件:

• 没有未使用的空白
• 轴对齐方向
• 允许重叠余量
• 切勿遮盖整个图像

我们可以使用装箱或四叉树算法(或其他算法)，但首先您要操作数据集。

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

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

我可以想到两个限制:

1. 最小图像尺寸基于您允许的最大重叠。
   • 这可以通过按照渲染顺序从大到小排序来解决。
2. 根据图像排序方式和 Canvas 大小，您的图像可能无法填满 Canvas - 垃圾箱包装可能会留下一些间隙。
   • 这可能可以通过更复杂的算法来解决 - 我还没有充分使用它们来了解。
   • 您也许可以缩放图像以填充该区域 - 同样，我对此区域了解不够。