340 likes | 484 Views
GENIE MULTIMEDIA Eléments graphiques. Christine Vanoirbeek EPFL – IC – CGC Bâtiment BC (Station 14) 1015 LAUSANNE christine.vanoirbeek@epfl.ch. Introduction. Approches « XML » pour le traitement des éléments graphiques Graphiques structurés Tableaux Formules mathématiques (MATHML)
E N D
GENIE MULTIMEDIAEléments graphiques Christine Vanoirbeek EPFL – IC – CGC Bâtiment BC (Station 14) 1015 LAUSANNE christine.vanoirbeek@epfl.ch
Introduction • Approches « XML » pour le traitement des éléments graphiques • Graphiques structurés • Tableaux • Formules mathématiques (MATHML) • Formules chimiques (CML) • Schémas • Diagrammes • … • Graphique vectoriel (SVG) GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
SVG • SVG (Scalable Vector Graphics) est une application XML qui permet de décrire • du graphique vectoriel • incluant texte et images • avec des couleurs dégradées, des filtres, une grande richesse de styles,etc. • des animations et des objets d'interaction GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
SVG: Historique • Groupe de travail constitué par le W3C en 1998 (avec des représentants de Microsoft, Autodesk, Adobe, IBM, Sun, Netscape, Xerox, Apple, Corel, HP, …) • Recommandation SVG 1.0 publiée en septembre 2001 • Recommandation SVG 1.1 publiée en janvier 2003 • comprend aussi une version SVG Mobile pour téléphones portables et PDAs • SVG 1.2 draft GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Structure globale d'un document SVG • Un fichier SVG a la forme suivante <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg"... > <desc> ... une description libre (optionnel) </desc> <defs> ... des définitions </defs> <g> ... le contenu graphique (<g> est optionnel) </g> </svg> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Système de coordonnées • Le système de coordonnée utilisateur est fixé par des attributs de l'élément racine <svg …> • width, height fixent la dimension de la fenêtre • en pixels px (par défaut) • en millimètres (mm), centimètres (cm), en pouces (in) • en grandeurs typographiques (em, ex, pt, pc) • viewport="x y w h"fixent la portion visible GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Objets graphiques élémentaires • SVG est basé sur les objets graphiques suivants • un ensemble de formes élémentaires • lignes • rectangles • cercles • ellipses • polygones • lignes polygonales • des formes quelconques définis par un contour • du texte • Positionnement des objets • Les objets SVG se positionnent dans un système de coordonnées qui commence en haut et à gauche • Il est possible de travailler avec des coordonnées locales GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Lignes • Une ligne est représentée par un élément • <line x1=… y1=… x2=… y2=…/> • Sa présentation est caractérisée par les attributs • stroke="color" où color a la forme • d'un nom: black, red, blue, ... • d'une valeur #rrggbb ou rgb(r%,g%,b%) • stroke-width="val" pour l'épaisseur du trait • stroke-dasharray="lst" pour le motif des pointillés où lst a la forme "s1 b1 s2 b2 … " • stroke-opacity="val" avec "val" entre 0 et 1 GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Rectangles • Un rectangle (parallèle aux axes) est représenté par • <rect x=… y=… width=… height=…/> • Sa présentation est caractérisée par les attributs • fill="color" avec une spécification de couleur • fill-opacity="val" avec "val" entre 0 et 1 • rx="val" et ry="val" pour définir des angles arrondis • stroke… pour la présentation des contours GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Exemple <svg ...> <rect x="10" y="10" width="140" height="40"/> <rect x="10" y="60" ... fill="red"/> <rect x="10" y="110" ... fill="none" stroke="blue" stroke-width="2"/> <rect x="10" y="160" ... fill="#9999FF" stroke="black" stroke-width="2" stroke-dasharray="10 10"/> <rect x="10" y="210" ... fill="yellow" stroke="red" stroke-width="2" stroke-dasharray="9 3 3 3" rx="10" ry="10"/> <rect x="10" y="260" ... stroke="red" stroke-opacity="0.8" stroke-width="10"/> </svg> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Cercles et ellipses • Un cercle est représenté par • <circle cx=… cy=… r=…/> • Une ellipse est représenté par • <ellipse cx=… cy=… rx=… ry=…/> • Leur présentation est régi par les mêmes attributs que les rectangles GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Polygones et lignes polygonales • Un polygone (courbe fermé) est représenté par • <polygon points="x1,y1 x2,y2 …"/> • Une ligne polygonale (ouverte) est représentée par • <polyline points="x1,y1 x2,y2 …"/> • normalement, on utilise polyline avec l'attribut fill="none« • Les attributs suivants contrôlent la présentation • stroke-linecap avec les valeurs butt, round, square définit la forme des extrémités • stroke-linejoin avec les valeurs miter, round, bevel définit la forme des angles GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Formes quelconques • SVG permet de définir des formes quelconques • <path d="data"/> où data contient les codes • M xy : aller à (x,y) • L xy : dessiner ligne vers (x,y) • H x : dessiner une ligne horizontale jusqu'à x • V y : dessiner une ligne verticale de longueur y • Z : fermer le chemin • A… : dessiner un arc d'ellipse • Q… , T… . dessiner une courbe de Bézier quadratique • C… , S… : dessiner une courbe de Bézier cubique • les codes minuscules (m,l,h,v,…) sont utilisés avec des coordonnées relatives GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Arcs elliptiques • Dans un chemin un arc elliptique est représenté par • A rx ry x-rot large-arc sweep x y où • rx ry représentent les rayons en x et y • x-rot représente l'angle de rotation par rapport à l'axe des x • large-arc et sweep définissent le segment • x y représentent lepoint final de l'arc GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Exemples: courbes de Bézier • Exemple de courbesde Bézier quadratiques • ... et cubiques GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Texte • Une chaîne de caractères (texte) est représentée par • <text x=… y=… >content</text> • Sa présentation est caractérisée par les attributs • font-family, font-size, font-weight et font-style, text-decoration, letter-spacing, ... (comme dans CSS) • text-anchor avec les valeurs start, middle et end pour l'alignement • fill="color" pour la couleur • L'élément <tspan …>permet de redéfinir les attributs d'une sous-chaîne • SVG supporte les caractère Unicode et il est possible d'écrire • verticalement (caractères droits ou inclinés) • selon une orientation quelconque • en suivant une courbe GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Images • Avec l'élément <image xlink:href="url" …>, il est possible d'importer des images en format JPEG, PNG ou un autre fichier SVG • x=…, y=…, permettent de positionner l'image • width=… et height=… permettent de dimensionner l'image • Il est également possible d'appliquer des filtres <image x="10" y="50" width="200" height="100" xlink:href="cathedrale_ge.jpg"> <title>Eglise large</title> </image> <image x="250" y="50" width="50" height="100" xlink:href="cathedrale_ge.jpg"> <title>Eglise longue</title> </image> <image x="310" y="50" width="100" height="100" xlink:href="cathedrale_ge.jpg preserveAspectRatio="xMinYMin meet"> <title>Eglise juste</title> </image> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Déformations et coupures • preserveAspectRatio="alignment mode" permet de conserver l'isométrie • mode vaut meet ou slice • alignmentest de la formexM……yM…… GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Transformations • Avant d'être affiché, un objet graphique peut subir une transformation définie par transform="…" • translate(tx,ty) • rotate(a) ou rotate(a,cx,cy) • scale(f) ou scale(fx,fy) • skewX(a), skewY(a) où les angle sont exprimés en degrés • Les transformations peuvent être combinées GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Transformations • Toutes ces transformations peuvent être représentées mathématiquementpar une matrice carrée 3 x 3 du type: • où seules 6 valeurs a,b,c,d,e,f sont différentes de 0 ou 1. On peut ainsi employer une notation vectorielle du type [ a b c d e f ] . • Les transformations transposent les coordonnées et les longueurs d'un système à l'autre par une relation: GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Transformations GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Regroupement d’éléments • SVG possède plusieurs constructions pour regrouper des objets dans des blocs. • Les objets SVG (comme les objets HTML) héritent le style de leurs parents GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Dégradés • Les dégradés de couleurs sont réalisés par <linearGradient …> et <radialGradient …> <svg ... viewBox="0 0 300 600"> <defs> <linearGradient id="lgrad" x1="0%" y1="100%" x2="0%" y2="0%"> <stop offset="0%" stop-color="#333"/> <stop offset="30%" stop-color="#FFC"/> <stop offset="100%" stop-color="#99F"/> </linearGradient> <radialGradient id="rgrad" fx="0.3" fy="0.3" r="0.5"> <stop offset="0%" stop-color="#FFF"/> <stop offset="20%" stop-color="#FF0"/> <stop offset="100%" stop-color="#F90"/> </radialGradient> </defs> <rect fill="url(#lgrad)" x="50" y="50" width="200" height="500"/> <circle fill="url(#rgrad)" cx="150" cy="200" r="60"/> </svg> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Découpe (clipping) • L'élément <clipPath> avec des objets 2D permet de restreindre le champ d'affichage selon une découpe <svg width="300" height="600"> <defs>... <clipPath id="triangleClip"> <path d="M 150 450 L 50 50 L 250 50 Z"/> </clipPath> <clipPath id="textClip"> <text x="150" y="220" font-size="80" text-anchor="middle">SUN</text> </clipPath> </defs> <g clip-path="url(#triangleClip)"> <rect fill="url(#lingrad)" .../> <circle fill="url(#radgrad)" ... clip-path="url(#textClip)"/> </g> </svg> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Styles • SVG peut être utilisé par les feuilles de styles CSS <svg ...> <defs><style type="text/css"><![CDATA[ polygon { fill:white; stroke:black; stroke-width:2 } .green { fill:#66FF66 } .yellow { fill:yellow } ]]></style></defs> <polygon class="yellow" points="60 90 40 10 80 30"/> <polygon points="10 10 30 90 90 50"/> <polygon class="green" points="30 40 40 70 60 60"/> </svg> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Animation • SVG offre un mécanisme pour créer des animations • Le principe consiste à inclure des éléments d'animation à l'intérieur des éléments graphiques • Les animations permettent de • déplacer ou déformer (pivoter, étirer, rétrécir, ...) • changer sa couleur • déplacer sur une trajectoire • Les fonctions d'animation sont reprises de SMIL2 (Synchronized Multimedia Integration Language, level 2) GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Animation d'un attribut • L'élément <animate …> spécifie un attribut et comment sa valeur évolue au cours du temps • attributeName="…" spécifie le nom de l'attribut • from="…" et to="…" fixent les bornes des valeurs • begin="…" et end="…" (ou dur="…") déterminent le début et la fin (resp. la durée) de l'animation • fill="freeze" permet à la fin de geler l'animation • <animateColor …> permet de d'animer les couleurs • <animateTranform …> et <animateMotion …> permettent des mouvements complexes GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Animation avec les transformations • L'élément <animateTranform …> avec attributeName="transform" type="…" permet l'application d'une transformation géométrique <svg width="600" height="400"> <text x="300" y="240" text-anchor="middle" font-size="20" fill="blue"> HELLO <animate attributeName="font-size" from="5" to="100" dur="2s" fill="freeze"/> <animateTransform attributeName="transform" type="rotate" from="0 300 200" to="360 300 100" dur="2s"/> </text> </svg> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Mouvement le long d'un chemin • L'élément <animateMotion …> permettent un déplacement le long d'un chemin défini par path="…" • Par contre, il est pratiquement impossible d'animer une courbe définie par un élément <path> ! <svg width="600" height="400"> <text text-anchor="middle" font-size="60" ...> HELLO <animateMotion path="M 50 50 Q 150 300 250 200 Q 350 100 450 300" dur="4s" fill="freeze"/> </text> </svg> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Avantages du graphisme vectoriel: • Compressibilité élevée • Taille et style adaptable • Capacité d’indexation • Les éléments graphiques sont des objets hiérarchiques GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Formule ‘ A =’ Intégrale ‘ f(x) dx’ Borne inf Borne sup ‘ 0’ ‘ 1’ Graphiques structurés: formules mathématiques • MathML: structure typoraphique et mathématique GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Formule Egalité Variable Intégrale ‘ A’ Borne inf Borne sup Intégrande Var intég. ‘ 0 ’ ‘ 1 ’ ‘ f(x) ’ ‘ dx ’ Graphiques structurés: formules mathématiques • MathML: structure typographique et mathématique GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Graphiques structurés: formules mathématiques • MathML, exemple de structure de présentation <msup> <mfenced> <mrow> <mi>a</mi> <mo>+</mo> <mi>b</mi> </mrow> </mfenced> <mn>2</mn> </msup> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Graphiques structurés: formules mathématiques • MathML, exemple de structure de contenu <apply> <power/> <apply> <plus/> <ci>a</ci> <ci>b</ci> </apply> <cn>2</cn> </apply> GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006