Travaux Dirigés de aci
7. L’épaisseur en SVG

Le canevas donné avec cet énoncé est le même que celui de la séance précédente. Il est toujours destiné à lire sur son flux d’entrée un texte html supposé contenir une et une seule table bien formée avec les attributs bgcolor et colspan pour la balise td. Chaque cellule a un contenu textuel supposé être un nombre entier en base 10, et de plus la somme des cellules d’une ligne est toujours égale à 100. Le but de l’application est de retourner sur le flux de sortie une traduction de cette table de valeurs numériques en un graphique SVG choisi parmi plusieurs grâce au premier argument fourni.


peroraison.h
tablehtml.c


1 Un camembert sur la table

On souhaite représenter chaque ligne de la table par un cercle découpé en tranches partant du rayon. La couleur de chaque tranche sera celle de l’attribut bgcolor de la cellule considérée. La longueur de l’arc de cercle sera proportionnelle à la valeur numérique figurant dans la cellule. La valeur de l’attribut colspan sera ignorée dans cette question. Le rayon du cercle est égal à la constante HAUTEUR (définie dans le fichier .h fourni).

En SVG, un arc d’ellipse se dessine par la commande A de l’attribut d de la balise path. Cette commande a 7 arguments :

  1. grand rayon
  2. petit rayon
  3. rotation (toujours égale à 0 ici)
  4. portion du cercle (1 pour la grande, 0 pour la plus petite)
  5. sens du tracé (0 pour trigonométrique, 1 sinon, ce qui lève l’ambiguité entre les deux cercles passant par les deux points donnés)
  6. coordonnnée du point d’arrivée
  7. abcisse du point d’arrivée.

Trouver une traduction graphique en SVG de la table donnée en exemple, en utilisant des opérateurs trigonométriques.


Obtenir un formulaire de soumission de comptes rendus

2 Une fabrique de camemberts

Donner la définition de la fonction C camembert, construisant cette traduction pour toute table HTML donnée sur le flux d’entrée.


Obtenir un formulaire de soumission de comptes rendus

3 Le volume de la table

On revient à la représentation graphique en rectangles, mais on souhaite donner une impression de volume en dessinant au dessus de chaque rectangle un parallélogramme dont l’un des côtés est le sommet du rectangle, et sur le bord droit du rectangle un autre parallèlogramme ayant ce bord comme côté commun. Trouver la traduction en SVG de ces deux parallèlogrammes pour un des rectangles de la table. Utiliser la balise polygon possédant un attribut points semblable à la construction XDrawPolygon de X11.


Obtenir un formulaire de soumission de comptes rendus

4 Cacher ce dessin que je ne saurais voir

Que se passe-t-il lorsque l’on souhaite dessiner ces effets de volumes sur tous les rectangles consécutifs d’une ligne de la table ? En déduire la fonction C cube dessinant les effets souhaités.


Obtenir un formulaire de soumission de comptes rendus

5 Ca se dégrade

La balise linearGradient permet de définir des dégradés de couleur de la gauche vers la droite, cette direction pouvant être changée avec l’attribut gradientTransform admettant en valeur la commande rotate vue avec la balise g. La définition d’un gradient consiste en une suite de balises stop avec les attributs suivants :

Choisir un système de nommage approprié et réécrire la fonction précédente afin que les rectangles utilisent l’attribut fill=’url(#nom)’.

Ecrire la fonction InitDefs définissant, dans la portée de la balise defs, autant de dégradés que la table HTML contient de cellules.


Obtenir un formulaire de soumission de comptes rendus

logo-spip E. Saint-James & F. Kordon - Master Informatique - UPMC Valid XHTML 1.0!
Calculé le 19 janvier 2021 à 07h28min