UP PREVIOUS NEXT   Technologies Internet et Education, © TECFA
  4. Alignement d'éléments SVG en cercle

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

(chapitre à développer)

4.1 Trigonométrie

 

Formules:

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

Formule: rad = deg / 180 * Pi

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

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

(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

(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

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 !)


UP PREVIOUS NEXT -- TIE