2010-11-01 6 views

Répondre

7

Il y a plusieurs pièces à ce puzzle. :)

La première pièce est SVG et son canevas. C'est ce que vous aurez besoin de dessiner, car sinon vous ne pouvez pas faire une pièce courbe d'une image. Seuls les rectangles sont possibles avec du HTML/CSS standard.

La deuxième pièce est un algorithme pour générer des pièces de puzzle à partir de l'image. Google devrait vous aider avec cela si vous ne pouvez pas en trouver un seul (même si cela ne semble pas très compliqué).

Le reste devrait être simple.

Ajouté: Un rapide Google search a donné just such a jigsaw engine dans le premier résultat. Découvrez the source of that.

+0

merci pour une réponse rapide. J'ai trouvé snapfit.js et aussi http://bookmarklets.heroku.com/bookmarklets/1786 (svg) et http://www.raymondhill.net/puzzle-rhill/jigsawpuzzle-rhill.php (toile). Je suppose à mon point de choisir toile ou svg n'est pas encore important, car ce que je cherche (et je ne trouve pas) est un pseudo code, une technique ou un extrait de code pour découper une image en pièces courbes et retourner un tableau d'objets créés .Je pense que la lecture du code source n'aide pas beaucoup puisque j'ai besoin de quelques bases :) – mdikici

+1

le code source dans votre message est très utile :))) – JavaRunner

1

Je vais supposer que l'image que vous voulez scier en pièces est une image raster avec une résolution que vous utiliserez pour les pièces du puzzle, appelez cela/picture /. Aussi, je suppose que vous avez les bords que vous souhaitez voir dans une deuxième image raster avec les mêmes dimensions, appelez cela/raster /. Ensuite, votre problème revient à déterminer toutes les zones connectées dans le raster. Chaque pixel du raster est annoté avec l'identifiant de la pièce de puzzle à laquelle il appartient, initialement 'none', -1 ou autre. Ensuite, votre algorithme balaye tous les pixels du raster, ignorant les pixels qui appartiennent déjà à une pièce. Pour chaque pièce non affectée, elle exécute un remplissage d'inondation, en "colorant" les pixels avec l'identifiant de pièces (par exemple, le nombre). Dans un deuxième balayage, après avoir alloué une image pour chaque pièce, vous ajoutez les pixels correspondants de l'image à la pièce. Dans le cadre de votre premier passage, vous pouvez conserver pour chaque identifiant de pièce le cadre de délimitation. Cela vous permet d'attribuer les images pour les pièces à leurs dimensions appropriées.

Vous avez besoin d'une convention appropriée pour traiter les pixels de bordure: par ex. Les pixels de bordure à droite appartiennent à la pièce s'ils ont la même position x, mais ils sont au-dessus de la pièce.