La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

SVG: Scalable Vector Graphics Exemple: Vienne. AWEB - 21-02-06 SVG: Scalable Vector Graphics Dialecte dXML pour la représentation de graphique vectoriel.

Présentations similaires


Présentation au sujet: "SVG: Scalable Vector Graphics Exemple: Vienne. AWEB - 21-02-06 SVG: Scalable Vector Graphics Dialecte dXML pour la représentation de graphique vectoriel."— Transcription de la présentation:

1 SVG: Scalable Vector Graphics Exemple: Vienne

2 AWEB SVG: Scalable Vector Graphics Dialecte dXML pour la représentation de graphique vectoriel 2D Tracés de base en vectoriel (courbes, lignes, rectangles,…) Affichage élaboré de texte Affichage dimages bitmap Animation du type SMILAnimation Interfaçage avec ECMAScript Interaction avec les bases de données (php) Affichage dans un navigateur Plugin SVG (Adobe). En natif dans FireFox 1.5 (pas toutes les fonctionnalités) Fonctions prédéfinies: zoom, déplacement On peut afficher un fichier svg zippé Concurrent:Flash Extension : SVG Mobile en cours de normalisation (SVGTiny)

3 AWEB Code Règles de XML : …. Toute balise ouverte doit être fermée –balises « autofermantes » On peut mettre des attributs dans la balise – couleur, type de tracé, position,... sensible à la casse, balises obligatoirement en minuscule utilisation des styles –soit dans une feuille de style CSS –soit dans le fichier svg imbriqués définition dobjets référencés réutilisables et use

4 AWEB Structure dun fichier SVG 1. version de xml 2. Référence à la DTD, informations sur la structure du document 3. AWEB - 21-02-06 Structure dun fichier SVG 1. version de xml 2. Référence à la DTD, informations sur la structure du document 3. <svg xmlns=

5 AWEB Système de coordonnées En pixels, en pouces (in), en cm, en points (pt), en %... width="200" ou width="10in" ou width="12cm" pt : 72 points par pouce % : un pourcentage de la fenêtre Taille et position de la fenêtre (viewport) "300" height="200"> Attribut : viewBox permet de définir les coordonnées utilisateur 0 x utilisateur 3000, y utilisateur -1000

6 Le point (0,0) sera en dehors de la fenêtre donc pas affiché Redéfinition du viewport: svg imbriqués P 2 =(3050,400) 300 pixels x y 200 pixels P 1 =(50,100)

7 AWEB Exemple de svg imbriqués

8 AWEB Objets SVG Affichage de texte : SVG orientation, textPath tracé le long dun chemintextPath Attributs de laffichage : couleur de remplissage, couleur du trait, opacité, épaisseur du trait,... style="stroke:#000000; stroke-width:2; fill:none; " couleur : rgb(r,v,b) 0 r,v,b 255 couleurs en Hexadécimal ou prédéfinies, dégradés,...

9 AWEB Dégradés de couleur dégradédégradé linéaire dégradédégradé radial cx="100" cy="100" r="100" fx="100" fy="0"> cx="100" cy="100" r="100" fx="200" fy="100">

10 AWEB Objets graphiques line : polyline et polygone : rectangle: coins arrondis rx="5" ry="3" cercle : ellipse : chemin M (ou m) moveto coordoonées absolues (L) ou relatives (l)

11 AWEB Path chemin : lineto coordoonées absolues (L) ou relatives ( l ) (point précédent) Bézier quadratiquequadratique M x 0 y 0 Q x 1 y 1 x 2 y 2 ou q en relatif par rapport à P 0 Bézier cubique cubique M x 0 y 0 C x 1 y 1 x 2 y 2 x 3 y 3 ou c en relatif Courbe compositecomposite M x 0 y 0 C... C... Q... L... ou M x 0 y 0 c... c... q... l...

12 AWEB Transformations géométriques attribut transform Translation: translate(a,b) Rotation autour de lorigine rotate( ), en degré ou rotation autour dun point rotate(, x, y) homotéthie scale(a) ou scale(a,b) déformation skewX( ) et skewY( ): utilisation skewX( ) utilisation Skewed by 30 degrees text On empile les transformations –transform="translate(0,10)scale(3)translate(20,5)" 1. translate(20,5) 2. scale(3) 3. translate(0,10)

13 AWEB divers Définition dun noeud XML on regroupe un ensemble dobjets SVG –au niveau des noeuds, on peut appliquer : suppression, changement de style, transformation géométrique,.. priorité aux redéfinitions dans les sous-noeuds Clipping –clipPath défini à partir de path, text, line, rect, circle, ellipse, polyline, polygon et use

14 AWEB Exemple de clippath

15 AWEB Balise définition dobjet identifié par son nom pas directement utilisé, mais pouvant être référencé on peut définir un ensemble dobjets: g transform="translate(0,100)">

16 AWEB Animation dérivé de SMIL 2.0 : SVG langage hôte balises danimation change les attributs « scalaires » –basée sur le temps et les évènements déplace un objet le long dun chemin transformations animées (modification de transform) Temporisation : choix du début, de la durée, du nombre de cycle, de la fin,.. exemple danimation: couleur, skewY, clipping,couleurskewYclipping

17 AWEB Interaction : les scripts Utilisation de scripts pour rendre interactifs les graphiques SVG Langage ECMAScript (the European Computer Manufacturer's Association) : –prend modèle sur Java, « même syntaxe » Orienté objet, interprété –versions différentes selon les navigateurs ( Javascript, Jscript) Les objets répondent à des événements –à des événements associés au statut d'un objet : onload –à des événements liés à la souris Cliquer : onclick, onmousedown, onmouseup Bouger la souris : onmouseover, onmouseout, onmousemove –à des événements non standardisés associés à des touches du clavier : onkeydown, onkeyup. Pour savoir où sest produit lévénement evt.getTarget() ou evt.target

18 AWEB SVG et le DOM L'objet svgDocument se réfère au contenu affiché dans la fenêtre du navigateur. Il se trouve sous l'objet window (et éventuellement sous lobjet document ). L'objet svgDocument a toutes les propriétés et les méthodes de dom::Document, events::DocumentEvent Les éléments d'un document SVG sont des sous-objets de l'objet svgDocument La valeur de l'attribut 'Id' doit être unique dans tout le document XML et obéir aux règles sur les noms de variables de ECMAScript. Exmple, pour accéder à un élément par son nom : svgDocument.getElementById("Id") Tout noeud - et avec lui tout élément - peut être supprimé par son parent. Un attribut ne peut être supprimé que par lélément auquel il appartient.

19 AWEB Arbre SVG et le DOM Le DOM permet daccéder aux éléments et à leurs attributs Laborescence du DOM element : chaque élément est aussi un noeud svgDocument : racine de larbre Interface commune aux objets SVG node: Name (nom de la balise) Value Type parent/child (au sens des nœuds)

20 AWEB Arbre SVG => DOM __ |__ __ __ // cabine __ // caisse verte __ // we start here ! __ __ // bobine rouge __ // bobine bleue __ __ // grande lettre __ // caisse bleue Pour atteindre la racine du document var doc = svgDocument; Pour accéder à lélément « train » var train = doc.getElementById("train"); ou si on part de wagon1 var wagon1 // le noeud wagon1 est déjà un objet var train = wagon1.parentNode; Pour atteindre les composants de wagon1 (tableau) var composants = wagon1.childNodes; les objets peuvent répondre à des événements evt

21 AWEB Les actions sur les objets SVG: quelques fonctionsquelques fonctions On peut : –Modifier les attributs des objets (taille, couleur, opacité, position, visibilité,...) getAttribute("nom") setAttribute("nom",valeur) createAttribute(): crée un nouvel attribut pour l'arborescence –Créer ou détruire des objets : createElement(): crée un nouvel élément pour l'arborescence createTextNode("un texte") : demande au document de créer un nouvel élément de texte dont le contenu est la chaîne transmise en argument. –Modifier l'arborescence : replaceChild(nouvelElement,ancienElement) : –va remplacer un nœud du document XML par un autre obj.firstChild : –sélectionne dans l'arbre XML le premier fils de l'objet obj appendChild(... ) Tout noeud - et avec lui tout élément - peut être supprimé par son parent. Un attribut ne peut être supprimé que par lélément auquel il appartient.

22 AWEB Les fonctions Javascript dans un document SVG Directement dans le fichier svg

23 AWEB Fonctions Javascript : Exemple 1Exemple 1 Un rectangle qui change de couleur au chargement (vert => bleu) evt : objet événement

24 AWEB Un cercle qui change de taille : 2me exemple2me exemple Source du svg : Passer la souris sur le cercle pour changer sa taille. ou bien déclaration pure et simple dans le fichier « scripts.js »

25 AWEB Manipulation du SVG: 3me exemple3me exemple.. function transformeTShirt() { obj = svgDocument.getElementById("tshirt"); obj.setAttribute("transform", "scale(" + facteurEchelle[choixEchelle] + ")"); obj.setAttribute("stroke-width", 1.0/facteurEchelle[choixEchelle] ); } function positionneEchelle(n) { var obj = svgDocument.getElementById("echelle" + choixEchelle); obj.setAttribute("fill", "white"); choixEchelle = n; var obj = svgDocument.getElementById("echelle" + choixEchelle); obj.setAttribute("fill", "#ffc"); transformeTShirt(); } Dans le svg.. S..

26 AWEB Fonctions Javascript : 3me exemple (2)3me exemple (2) Insérer un document svg dans une page html : Magasin en ligne ou bien On peut inclure un fichier compressé (zippé)

27 AWEB Interaction avec php : 4e exemple (1)4e exemple (1) Directement à l'appel du script php par affichage de l'url /carte.php?dep=51 Par insertion de l'appel dans une page html 4e exemple inséré dans une page Source de la page de l'exemple avec balise object d'inclusion du svg Source du générateur de carte svg: "carte.php" Remarque : on peut généré du code svg zippé, la décompression se fait sur le client au moment de l'affichage.

28 AWEB Interaction avec php : 4e exemple (2)4e exemple (2) 1.Stocker les path et autres informations dans une base de données 2.Définir les requêtes qui iront chercher ces informations 3.Dans le script php, effectuer ces requêtes et générer le source svg tel qu'il doit être pour s'afficher 4.Inclure dans le source svg la notification du fichier contenant les fonctions javascript et les appels à ces fonctions 5.Inclure dans le fichier html l'appel au script php comme si c'était un source svg (balise object)

29 AWEB Interaction avec php : Une application complète

30 AWEB Exemple de svg imbriqués (2)

31 AWEB Animation des couleurs - source

32 AWEB Animation Déformation - source SVG Unleashed SVG Unleashed

33 AWEB Animation clipath-source element -->

34 AWEB Manipulation de svg : quelques fonctions svgDocument : –référence au document SVG tout entier et on utilise ses propriétés et méthodes pour accéder aux parties du document dont on a besoin. evt.target : –retourne une référence vers l'objet graphique qui a déclenché l'événement. En général, on la stocke dans une variable. getElementById(Id) : –prend une chaîne de caractères comme paramètre et retourne l'objet dont l'attribut id correspond. setAttribute : –modifie la valeur d'un attribut getAttribute(_nom_) : –récupère, sous la forme d'une chaine de caractères, la valeur de l'attribut mentionné svgDocument.createTextNode(_un texte_) : –demande au document de créer un nouvel élément de texte dont le contenu est la chaîne transmise en argument. replaceChild(nouvelElement,ancienElement) : –va remplacer un nœud du document XML par un autre obj.firstChild : –sélectionne dans l'arbre XML le premier fils de l'objet obj

35 AWEB Arbre SVG et DOM (2) __ |__ __ __ // cabine __ // caisse verte __ __ // bobine rouge __ // bobine bleue __ __ // grande lettre __ // caisse bleue svgDocument : racine de larbre SVG Interface commune aux objets SVG node: Name (nom de la balise) Value Type element : chaque élément est aussi un noeud event parent/child (au sens des nœuds) var doc = svgDocument; Pour accéder à un élément var wagon1 = doc.getElementById("wagon1"); Pour atteindre le « train » var train = wagon1.parentNode; Pour atteindre les composants de wagon1 (tableau) var composants = wagon1.childNodes; les objets peuvent répondre à des événements evt

36 AWEB Exemple : modification de l'arborescence Script : La valeur de l'attribut est l'appel d'une fonction Javascript????


Télécharger ppt "SVG: Scalable Vector Graphics Exemple: Vienne. AWEB - 21-02-06 SVG: Scalable Vector Graphics Dialecte dXML pour la représentation de graphique vectoriel."

Présentations similaires


Annonces Google