3
A
回答
7
這個謎題有幾個部分。 :)
第一件是SVG和它的畫布。這就是你需要繪製的,因爲否則你不能在圖片中製作一塊彎曲的部分。標準HTML/CSS只能使用矩形。
第二部分是從圖片中生成拼圖碎片的算法。谷歌應該幫助你,如果你不能自己找出一個(雖然看起來不是很複雜)。
其餘的應該很簡單。
加:快速Google search在第一個結果給了just such a jigsaw engine。退房the source of that。
1
我假設你想要看到的圖像是一個光柵圖像,其分辨率將用於拼圖,稱爲/圖像/。另外,我假設你有相同尺寸的第二個光柵圖像所看到的邊緣,稱之爲/ raster /。那麼你的問題就等於確定柵格中的所有連接區域。柵格的每個像素都用它所屬的拼圖塊的ID進行註釋,最初是「無」,-1或其他。然後,您的算法掃描光柵中的所有像素,跳過已屬於一塊的像素。對於每個未分配的作品,它會執行一次洪水填充,用這些作品ID(例如數字)「着色」像素。在第二次掃描中,在爲每件作品分配圖像後,將圖像的相應像素添加到作品中。作爲第一遍的一部分,您可以爲每個作品ID保留邊界框。這使您可以將這些圖片分配到適當的尺寸。
您需要一個合適的約定來處理邊界像素:例如,如果右邊的像素具有相同的x位置,則屬於該片段,但是高於它們也屬於該片段。
相關問題
- 1. 如何在javafx中裁剪圖像以創建拼圖遊戲拼圖?
- 2. XCode拼圖遊戲
- 3. 在拼圖遊戲中的Javascript圖像位置
- 4. Java拼圖遊戲縮放
- 5. as3 Error#2007拼圖遊戲
- 6. 創建圖像問答遊戲
- 7. 拼字遊戲拼圖檢查
- 8. 如何創建遊戲地圖?
- 9. 創建遊戲圖表 - Asm
- 10. Java中的圖片拼圖遊戲
- 11. 在flash中爲拼圖遊戲創建不規則形狀
- 12. 創建python拼字遊戲函數
- 13. 如何使用JavaScript/Node.js創建圖像?
- 14. 使用jQuery創建圖像益智遊戲
- 15. 使用Javascript創建預測遊戲
- 16. 如何用LPSolve創建二維圖像拼圖
- 17. iPhone拼圖遊戲完成檢測
- 18. Android拼圖遊戲 - 原生vs Phonegap
- 19. 拼圖遊戲代碼沒有運行
- 20. 拼圖遊戲步行動畫
- 21. 如何從swf遊戲創建縮略圖?
- 22. 創建Javascript遊戲教程
- 23. 在javascript遊戲中褪色圖像
- 24. 簡單的JavaScript的HTML圖像遊戲
- 25. Javascript內存遊戲 - 圖像交換
- 26. 的JavaScript結束遊戲圖像
- 27. JavaScript骰子游戲 - 圖像不變
- 28. 使用PHP從多個圖像創建附加的照片拼貼圖像
- 29. 使用流水遊戲圖像
- 30. 如何創建FPS遊戲?
感謝您的快速回復。我發現snapfit.js和http://bookmarklets.heroku.com/bookmarklets/1786(svg)和http://www.raymondhill.net/puzzle-rhill/jigsawpuzzle-rhill.php(帆布)。我假設在我選擇canvas或svg的觀點並不重要,因爲實際上我正在尋找(並且找不到)的是僞代碼,技術或代碼片段,將圖像切片爲曲面片段並返回從這些單片創建的對象數組.i認爲閱讀源代碼沒有多大幫助,因爲我需要一些基礎知識:) – mdikici 2010-11-01 13:32:26
您的文章中的源代碼非常有用:))) – JavaRunner 2013-07-29 03:25:07