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

Question

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

• 如何将图像切成弯曲的片段
• 如何从这些片段创建单独的对象（我认为我需要这样做来重新组装）

谢谢。

- mdikici

Answer 1

这个问题有几个要素。:)

第一部分是SVG和它的Canvas。因为只有使用它们，你才能画出曲线拼图块，否则只能用标准的HTML/CSS画矩形。

第二部分是从图片生成拼图块的算法。如果你自己无法想出一个算法，谷歌可以帮助你(虽然它看起来并不是很复杂)。

其余的部分应该都很简单明了。

补充: 快速的谷歌搜索在第一条结果中提供了这样一个拼图引擎。查看它的源代码。

- Vilx-

---

感谢您的快速回复。我找到了Snapfit.js，还有http://bookmarklets.heroku.com/bookmarklets/1786（SVG）和http://www.raymondhill.net/puzzle-rhill/jigsawpuzzle-rhill.php（Canvas）。我认为在我的情况下，选择Canvas或SVG并不重要，因为实际上我正在寻找（但找不到）一种伪代码、技术或代码片段，用于将图像切成曲线形状，并返回由这些单独的碎片创建的对象数组。我认为阅读源代码并没有什么帮助，因为我需要一些基础知识 :) - mdikici

Answer 2

我假设你想要切成拼图块的图片是一个光栅图像，其分辨率将用于拼图块，称之为 /picture/。此外，我假设你有沿着你希望锯开的边缘的第二个光栅图像，具有相同的尺寸，称之为 /raster/。那么你的问题就在于确定光栅图像中的所有连通区域。每个光栅图像的像素都会被注释为所属的拼图块的 id，最初为“none”、“-1”或其他。然后，你的算法扫描光栅图像中的所有像素，跳过已经属于某个拼图块的像素。对于每个未分配的拼图块，它执行一次泛洪填充，将像素着色为该拼图块的 id（例如数字）。在第二次扫描中，在为每个拼图块分配图像之后，将图像的相应像素添加到拼图块中。作为第一遍的一部分，你可以维护每个拼图块 id 的边界框。这使你能够将拼图块的图像分配到其适当的尺寸。

你需要一个适当的约定来处理边框像素：例如，右侧的边框像素属于该拼图块，如果它们具有相同的 x 位置，但是如果它们在上面，它们也属于该拼图块。

- Marko