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

Question

我用谷歌搜索了，但没有找到一个好的答案。具体来说，我想学习：

• 将图像切成曲线
• 从这些作品中创建单个对象（我假设我需要 这个重新组装）

感谢。

Answer 1

这个难题有几个部分。 ：）

第一部分是SVG及其Canvas。这就是你需要绘制的东西，因为否则你无法从图片中制作出弯曲的部分。标准HTML / CSS只能使用矩形。

第二部分是用于从图片生成拼图块的算法。谷歌应该帮助你，如果你不能自己解决（虽然它似乎并不复杂）。

其余的应该是直截了当的。

已添加：快速Google search在第一个结果中提供了just such a jigsaw engine。查看the source of that。

Answer 2

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

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