1 / 34

GENIE MULTIMEDIA Eléments graphiques

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)

mick
Télécharger la présentation

GENIE MULTIMEDIA Eléments graphiques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. GENIE MULTIMEDIAEléments graphiques Christine Vanoirbeek EPFL – IC – CGC Bâtiment BC (Station 14) 1015 LAUSANNE christine.vanoirbeek@epfl.ch

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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

  15. Exemples: courbes de Bézier • Exemple de courbesde Bézier quadratiques • ... et cubiques GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

  16. 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

  17. 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

  18. 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

  19. 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

  20. 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

  21. Transformations GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006

  22. 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

  23. 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

  24. 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

  25. 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

  26. 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

  27. 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

  28. 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

  29. 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

  30. 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

  31. 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

  32. 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

  33. 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

  34. 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

More Related