Positionnement de plusieurs éléments positionnés de façon aléatoire afin qu'ils ne se chevauchent pas

Ok Je dois pouvoir positionner un groupe de mots positionnés de façon aléatoire sur une page, mais je ne veux pas que les éléments se chevauchent .Positionnement de plusieurs éléments positionnés de façon aléatoire afin qu'ils ne se chevauchent pas

L'objectif final est d'avoir un nuage de mots fluide qui répond à l'interaction de l'utilisateur (rappelez-vous le Google Balls Doodle?). Je voudrais vraiment construire ceci à partir de zéro pour développer ma compréhension de ce type de développement. Toute aide dans ce département serait également appréciée :)

Source

2011-06-03 wilsonpage

Il peut être utile de définir la taille de la police, d'obtenir d'abord la hauteur/largeur de l'élément qui l'entoure, puis de commencer par le positionnement. http://jsfiddle.net/yYB7t/ – minikomi

@minikomi une idée de comment faire le positionnement? Je sais comment obtenir la hauteur et la largeur d'un élément. – wilsonpage

Je ne suis pas sûr si vous voulez également placer les mots au hasard dans un conteneur, mais j'ai écrit un violon qui fait exactement cela. Vous pouvez modifier le code pour positionner un mot juste après l'autre si vous voulez bien. Je pense que la partie clé est la méthode pour vérifier s'il y a une collision.

voir http://jsfiddle.net/fZtdt/13/

EDIT: Sachez que cela est très simple et le code non optimisé. Si, par exemple, vous ajouteriez beaucoup de mots, il y a de fortes chances que le script ne puisse pas contenir tous les mots à l'intérieur du conteneur et entrer dans une boucle sans fin.

Source

2011-06-03 10:29:37

C'est assez impressionnant! Mon but final est de créer quelque chose qui ressemble à ceci http://www.lucaongaro.eu/demos/jqcloud/ Pouvez-vous aider/modifier votre réponse? – wilsonpage

sûr, vous pouvez simplement styler tous les mots à votre guise. consultez http://jsfiddle.net/fZtdt/14/ –

la chose jqcloud semble utiliser une fonction en spirale pour positionner les balises, en commençant par le centre avec les plus grands mots. Je ne vais pas poster ce code puisque vous pouvez juste obtenir le code open source pour cela ici: http://plugins.jquery.com/project/jQCloud –

J'ai ajouté le script de Jules pour ajouter cette amélioration: la recherche d'une région non chevauchante est bornée (sinon le script original bouclera je crois), et la meilleure région (celle avec le plus petit chevauchement) est sélectionnée .

voir http://jsfiddle.net/Vnyvc/21/

jeu avec les maxSearchIterations variables et/ou la taille de la région, il fait vraiment une différence.

Source

2011-11-28 21:55:05 cthiebaud

Positionnement de plusieurs éléments positionnés de façon aléatoire afin qu'ils ne se chevauchent pas

Répondre

Questions connexes