2

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

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

因此,例如,如果我有一张图像,我可能会将其放在屏幕中央。

          |

如果我有两个图像,我会尝试将它们放在屏幕的中心,然后将它们水平分开,使它们看起来相对于彼此以及屏幕居中。

     | |

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

    |-----|

  | |

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

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

  | |

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

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

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

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

解决这个问题的好方法是什么?即使处理像拥有两个图像(可能大小不同)这样的基本情况也已经很混乱了。

4

2 回答 2

1

您可以将此视为2D 装箱问题,它将以“紧凑”的方式优化非重叠矩形,但不考虑美学。

如果你想自己滚动,你可以尝试将画布上的所有图像放在一个网格上,中心到中心的间距足够大,没有图像重叠。然后将图像“挤压”在一起,从左到右,从上到下,以减少空白的数量。

于 2012-04-25T20:38:44.833 回答
0

100% 宽度和高度(禁用溢出)的 html 表格是一个很好的起点 IMO - 在第一次迭代中,只需按大小排序图片并制作 8 个模板,如:

  1. <tr><td><img></td></tr>
  2. <tr><td><img></td><td><img></td></tr>
  3. 2 行,首先使用 colspan=2
  4. ...

然后找到一些丑陋的案例并为它们制定特殊规则(比如 3 个垂直图像组成 1 行,...)

于 2012-04-25T19:52:41.607 回答