image - 将图像放置在屏幕上的算法 "nicely"

Question

注意:这不适用于网页，它是一个简单的程序，它包含一组图像并会随机选择一些图像并将它们显示在屏幕上。想象一下使用图像编辑器并在 Canvas 上手动定位导入的图像。

我很难想出一种在固定尺寸的屏幕(它只是一个窗口)上放置一组任意图像的方法

例如，如果我有一张图片，我可能会将它放在屏幕中央。

          |

如果我有两张图片，我会尝试将它们放在屏幕中央，然后将它们水平分开，这样它们看起来相对于彼此以及屏幕居中。

     |          |

但是如果一张图片比另外两张大怎么办？我可能有类似的东西

    |-----|  |         |

同样，也许我有两个大的和两个小的

|-----|   |-----|  |         |

这样大的出现在“后面”，而小的出现在前面。

有些图像不可避免地会覆盖其他图像的一部分，但我能做的最好的就是尽量让它尽可能有序。

我可以快速抓取要绘制的每个图像对象的尺寸，并且绘制的图像数量是有限的(从 1 到 8 个)。

图像可以绘制在屏幕上的任何位置，如果图像的任何部分超出屏幕，这些部分将被切掉。所有图像的尺寸都小于屏幕尺寸，通常不超过整个屏幕的 1/4。

解决这个问题的好方法是什么？即使处理基本情况，比如有两个图像(可能大小不同)也已经相当困惑了。

Answer 1

您可以将其视为 2D bin packing problem ，这将以“紧凑”的方式针对非重叠矩形进行优化，但不会考虑美学。

如果您想自己滚动，可以尝试将 Canvas 上的所有图像放在一个网格上，中心到中心的间距足够大，不会有图像重叠。然后将图像从左到右、从上到下“挤压”得更近，以减少空白量。