如何使用javascript从图像创建拼图游戏

Question

我使用了Google搜索，但没有找到一个好的答案。具体而言，我想了解：

• 切片图像成弯曲件
• 创建从这些作品单个对象（我认为我需要 这个重新组合）

感谢。

Answer 1

这个谜题有几个部分。 :)

第一件是SVG和它的画布。这就是你需要绘制的，因为否则你不能在图片中制作一块弯曲的部分。标准HTML/CSS只能使用矩形。

第二部分是从图片中生成拼图碎片的算法。谷歌应该帮助你，如果你不能自己找出一个（虽然看起来不是很复杂）。

其余的应该很简单。

加：快速Google search在第一个结果给了just such a jigsaw engine。退房the source of that。

Answer 2

我假设你想要看到的图像是一个光栅图像，其分辨率将用于拼图，称为/图像/。另外，我假设你有相同尺寸的第二个光栅图像所看到的边缘，称之为/ raster /。那么你的问题就等于确定栅格中的所有连接区域。栅格的每个像素都用它所属的拼图块的ID进行注释，最初是“无”，-1或其他。然后，您的算法扫描光栅中的所有像素，跳过已属于一块的像素。对于每个未分配的作品，它会执行一次洪水填充，用这些作品ID（例如数字）“着色”像素。在第二次扫描中，在为每件作品分配图像后，将图像的相应像素添加到作品中。作为第一遍的一部分，您可以为每个作品ID保留边界框。这使您可以将这些图片分配到适当的尺寸。

您需要一个合适的约定来处理边界像素：例如，如果右边的像素具有相同的x位置，则属于该片段，但是高于它们也属于该片段。