La première pièce est le SVG et sa Toile. C'est ce que vous aurez besoin de dessiner, parce que sinon, vous ne pouvez pas faire une courbe morceau d'une image. Seuls les rectangles sont possibles avec la norme HTML/CSS.
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 à vous si vous ne pouvez pas comprendre l'une par vous-même (mais il ne semble pas très compliqué).
merci pour la réponse rapide. j'ai trouvé snapfit.js et aussi bookmarklets.heroku.com/bookmarklets/1786 (svg) et raymondhill.net/puzzle-rhill/jigsawpuzzle-rhill.php (en toile).Je suppose que mon point de vue le choix de la toile ou le svg n'est pas important encore, parce qu'en fait, ce que je cherche (et ne pouvait pas trouver) est un pseudo-code, d'une technique ou d'un extrait de code pour découper une image en courbes morceaux et les remettre tableau d'objets créés à partir de ces pièces individuelles.je pense que la lecture du code source ne nous aide pas beaucoup car j'ai besoin de quelques notions de base 🙂 le code source dans votre post est très utile :)))
Je vais assumer l'image que vous souhaitez au vu des pièces est une image raster avec une résolution que vous allez utiliser pour les pièces du puzzle, appel /image/. Aussi, je suppose que vous avez les bords de laquelle vous souhaitez vu dans un deuxième image raster avec les mêmes dimensions, appel /raster/. Ensuite, votre problème élève à la détermination de tous les domaines liés à la trame. Chaque pixel de la trame devient annoté avec l'id de la pièce de puzzle, il appartient, d'abord 'none', -1 ou quoi que ce soit. Ensuite, votre algorithme scans sur tous les pixels de la trame, en ignorant les pixels qui appartiennent déjà à un morceau. Pour chaque non attribuées à la pièce, il exécute un flot de remplissage, de "coloriage" les pixels avec les pièces d'identité (par exemple le nombre). Dans une deuxième analyse, après l'affectation d'une image pour chaque morceau, vous ajoutez le correspondant de pixels de l'image à la pièce. Dans le cadre de votre premier passage, vous pouvez maintenir pour chaque pièce de l'id de la boîte englobante. Qui permet d'allouer les images pour les pièces à leurs dimensions.
Vous besoin d'un convention pour traiter avec bordure en pixels: par exemple, la frontière pixels vers la droite appartiennent à la pièce si ils ont la même position en x, mais sont au-dessus, ils appartiennent aussi à la pièce.
Il y a plusieurs pièces de ce puzzle. 🙂
La première pièce est le SVG et sa Toile. C'est ce que vous aurez besoin de dessiner, parce que sinon, vous ne pouvez pas faire une courbe morceau d'une image. Seuls les rectangles sont possibles avec la norme HTML/CSS.
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 à vous si vous ne pouvez pas comprendre l'une par vous-même (mais il ne semble pas très compliqué).
Le reste devrait être simple.
Ajouté: Un rapide Recherche Google a donné juste un puzzle de moteur dans le premier résultat. Découvrez la source de cette.
le code source dans votre post est très utile :)))
OriginalL'auteur Vilx-
Je vais assumer l'image que vous souhaitez au vu des pièces est une image raster avec une résolution que vous allez utiliser pour les pièces du puzzle, appel /image/. Aussi, je suppose que vous avez les bords de laquelle vous souhaitez vu dans un deuxième image raster avec les mêmes dimensions, appel /raster/. Ensuite, votre problème élève à la détermination de tous les domaines liés à la trame. Chaque pixel de la trame devient annoté avec l'id de la pièce de puzzle, il appartient, d'abord 'none', -1 ou quoi que ce soit. Ensuite, votre algorithme scans sur tous les pixels de la trame, en ignorant les pixels qui appartiennent déjà à un morceau. Pour chaque non attribuées à la pièce, il exécute un flot de remplissage, de "coloriage" les pixels avec les pièces d'identité (par exemple le nombre). Dans une deuxième analyse, après l'affectation d'une image pour chaque morceau, vous ajoutez le correspondant de pixels de l'image à la pièce. Dans le cadre de votre premier passage, vous pouvez maintenir pour chaque pièce de l'id de la boîte englobante. Qui permet d'allouer les images pour les pièces à leurs dimensions.
Vous besoin d'un convention pour traiter avec bordure en pixels: par exemple, la frontière pixels vers la droite appartiennent à la pièce si ils ont la même position en x, mais sont au-dessus, ils appartiennent aussi à la pièce.
OriginalL'auteur Marko