如何使用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位置，則屬於該片段，但是高於它們也屬於該片段。