Positionnement SVG Eléments

Question

Au cours de jouer avec SVG pour la première fois (en utilisant la bibliothèque Raphael), je l'ai rencontré un des éléments dynamiques de positionnement de problème sur la toile de telle sorte qu'ils sont complètement contenus dans La toile. Ce que j'essaie de faire est de positionner au hasard n mots/phrases courtes.

Puisque le texte est variable, sa position doit être variable, si bien que ce que je fais est:

1. Dans un premier temps la création du texte au point 0,0 sans opacité.
2. Vérification de la largeur de l'élément de texte établi en utilisant text.getBBox().width.
3. Définir une nouvelle coordonnée x comme Math.random() * (canvas_width - (text_width/2) - pad).
4. Modification de la coordonnée x du texte à la nouvelle valeur définie (text.attr('x', x)).
5. Réglage de l'attribut d'opacité du texte à 1.

je serai le premier à admettre que mon sens des mathématiques est limité, mais cela semble assez simple. D'une manière ou d'une autre, je finis toujours avec du texte qui coule au-delà du bord droit de ma toile. Pour la simplicité ci-dessus, j'ai supprimé le bit qui définit également une valeur minimale de x en l'ajoutant au résultat Math.random(). Il est là, cependant, et je vois le même problème sur le bord d'attaque de la toile. Ma compréhension (telle quelle), est que les bits Math.random() généreraient un nombre entre 0 et 1 qui pourrait ensuite être multiplié par un certain nombre (dans mon cas, la largeur du canevas - la moitié de la largeur du texte - certains padding arbitraire) pour obtenir la limite extérieure. Je divise la largeur du texte en deux parce que sa position sur la grille est placée en son centre.

J'espère que je viens de les yeux fixés sur ce trop long, mais est mon maths que rouillé ou je comprends mal quelque chose sur le comportement de Math.random(), SVG, texte ou toute autre chose qui est sous le capot de cette solution ?

Answer 1

La réponse s'est avérée être comment je pensais à l'équation Math.random(). Ce n'est pas aussi simple que de multiplier par le maximum puis d'ajouter la valeur minimale (bien sûr). Il est vraiment plus comme l'établissement d'une double largeur gouttière à l'extrémité droite du conteneur, puis déplacer toute la frontière pour manger la moitié de cette gouttière:

var x = Math.random() * (canvas_w - 20 - (text.getBBox().width)) + (text.getBBox().width/2 + 10); 

En anglais ...

Vous devez double la largeur de chaque élément que vous voulez prendre en compte afin que vous puissiez décaler toute la gamme de cette largeur pour que les choses restent belles et égales. Dans mon cas, je veux représenter la moitié de la largeur du texte, plus un rembourrage de 10.

Par exemple ...

reçoit une largeur de toile de 500, une largeur de texte de 50 et désiré "gouttière" de 10, je crée un nombre aléatoire entre 0 et 430 (500 - 20 - 50).En rajoutant les largeurs dont j'ai besoin de rendre compte - la moitié de la largeur du texte (25) + le remplissage (10) - Je me retrouve avec un nombre aléatoire entre 35 et 465. Si mon texte se trouve sur les bords extérieurs de cette limite, il ne peut atteindre que le 10 ou 490.

J'espère que c'est assez clair pour avoir du sens. Bien que cela ait du sens quand j'y pense, ce genre de chose n'est pas immédiatement intuitif pour moi, alors je suis sûr que je ferai référence ici souvent.