将图像放入拼贴画布

Question

我有一系列不同大小的图像。我想将这些图像放在画布上，采用一种自动拼贴。 有没有人知道如何运用这个概念背后的逻辑？

我的所有图像都有高度可被36像素整除，宽度可被9像素整除。它们具有允许您拖放的mouseDown函数。当放下图像时，图像会移到最接近的x点，可被9整除，y点可被36分割。画布顶部有一个网格。

我根据高度对图像数组进行了排序，然后根据它们的宽度进行了排序。

  

imagesArray.sortOn（“height”，Array.NUMERIC | Array.DESCENDING）;   imagesArray.sortOn（“width”，Array.NUMERIC | Array.DESCENDING）;

我想把最大的图像（imageArray [0]）放在角x，y = 0,0。然后随机化其余图像并将它们装入拼贴画布。

Answer 1

您尝试做的事情听起来像treemapping。

Answer 2

我认为这就是所谓的“Packing problem”或“2D bin packing problem”。谷歌搜索那些应该找到你的一些信息，有效地做这不是一个简单的任务。如果您只有少量图像，那么简单的方法就是：

1. 随机...只是随机放置图像，直到不再适合。运行此随机放置10..100..1000或更多次，并选择最佳结果（“最佳”由某些标准确定，例如最少浪费的空间，或大多数图片适合等）

2. 蛮力......逐一尝试每一种可能的组合，并选择“最佳”组合。这种方法的缺点是随着项目数量的增加，计算量会迅速扩大。

Answer 3

我研究了树形图和包装问题。 ....并最终决定在画布上创建一个包含所有点的数组，然后为它们指定一个空值。然后我循环浏览我的图像数组并将它们放在“空”的点上，并将其占据的所有点重新分配给图像的源名称。它工作得很漂亮。但绝对需要时间来创建数组。

Answer 4

我做了一个不同的看法，我只是将所有图像放到图块大小并将其平铺到文档中。 图像是通过图层蒙版以文件大小为中心的虚拟中心。 粘贴图像滚动脚本http://www.mouseprints.net/old/dpr/PasteImageRoll.html http://www.mouseprints.net/old/dpr/PasteImageRoll.jsx