4. Alignement d'éléments SVG en cercle

4.1 Trigonométrie

Pour placer des éléments autour d'un circle il faut faire un peu de trigonométrie

Formules:

Les angles sont exprimés en radians basé sur la constante Pi (3.142)

En informatique on utilise les radians (au lieu des degrés)
Une cercle = 360 degrés = 2 Pi, 180 degrés = Pi, 90 degrés = Pi/2

Formule: rad = deg / 180 * Pi

Calculer la position x d'un élément en connaissant l'angle et le radius:

Pour chaque élément à placer on incrémente l'angle: i * angle
Pour les dessins vectoriels, il faut ajouter la position du cercle (ori_x)
Pour rendre la fomule plus flexible: on ajoute l'angle de départ, on travaille avec un arc (partie d'une circle), et on utilise (i div n) qui permet de faire un 2ème tour.

x=ori_x + cos(arc / n_els * (i % n_els) + start_angle) * radius

ori_x = coordonée x du circle

arc = angle total de dessin, par ex. pour 10 éléments sur 360 dégrés:

n_els = nombre d'éléments

angle = arc/n_els = Pi * 2 / 10 = 6.283 / 10 = 0.63

i = numéro de l'élément ( i % n_els est égal à i dans ce contexte)

start_angle = angle de départ sur le cercle (ou commencer à dessiner)

Pour calculer la position y d'un élément en connaissant l'angle et le radius:

y=ori-y + sin(arc / n_els * (i % n_els) + start_angle) * radius

4.2 Alignement en cercle avec PHP

Exemple 4-1: Génération d'éléments SVG autour d'un cercle

http://tecfa.unige.ch/guides/svg/ex/objects-in-circles/ (répertoire et source)
elements-on-circle-with-php.php (placer des rectancles autour d'un cercle)
elements-on-arc-with-php.php (même chose, mais sur un arc arbitraire)

(documentation à faire, voir le code source pour le moment)

Note pour le code: En graphisme par ordinateur (SVG et autres), l'origine (0,0) est en haut à gauche et y incrémente vers le bas, donc forcément le dessin commence à droite et vers le bas (au sens de la montre).

Exemple 4-2: XML vers SVG et visualiser autour d'un cercle

http://tecfa.unige.ch/guides/svg/ex/objects-in-circles/ (répertoire et sources)
elements-on-arc-with-simple-xml.php (lire des items RSS avec simple-xml)
elements-on-arc-with-dom.php (lire des items RSS avec DOM)

(documentation à faire, voir le code source pour le moment)

4.3 Alignement en cercle avec XSLT et un brin de PhP

Exemple 4-3: Génération d'éléments SVG autour d'un cercle

http://tecfa.unige.ch/guides/svg/ex/objects-in-circles/ (répertoire et source)
elements-on-circle-with-xslt.php (placer des rectancles autour d'un cercle)
elements-on-circle-with-xslt.xsl (feuille de style)

Fonctions trigonométriques en XSLT

Il y en a pas (donc il faut soit les programmer avec JS, Java, ou en XSLT avec des tables etc., soit faire appel à PhP et donc faire le rendering en SVG du côté serveur)
Pour que cela marche il faut enregister les fonctions php dans xslt:

$proc = new XSLTProcessor;

// This allows to access ALL php functions within XSLT

$proc->registerPHPFunctions();

Attention aux namespaces dans le fichier XSLT:

<xsl:stylesheet version="1.0"

 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

 xmlns:php="http://php.net/xsl"

 xmlns:xlink="http://www.w3.org/1999/xlink">

(cf. aussi les transparents svg-xslt pour des détails !)