FireMonkey : Les PathData et le format SVG

Nous avons vus dans le tutoriel 1 et 2 la faon danimer un texte ou un objet 3D (cube) grce au composant TFloatAnimation. Nous allons voir maintenant comment animer un objet 2D en lui faisant suivre un chemin grce au composant TPathAnimation et sa proprit Path qui inclue un concepteur de chemin ne comprenant que 2 formats : SVG et XAML. Mais avant toute chose, une petite intro sur le format SVG. Cela signifie Scalable Vector Graphics . Ce langage permet d'crire des graphiques vectoriels 2D en XML. Il a t invent en 1998 par un groupe de travail (comprenant Microsoft, Autodesk, Adobe, IBM, Sun, Netscape, Xerox, Apple, Corel, HP, ILOG...) pour rpondre un besoin de graphiques lgers, dynamiques et interactifs. Bien que trs intressant pour le HTML5 afin de crer des animations graphiques vectorielles, nous allons nous intresser uniquement une de ses composantes : la balise Path et en particulier son attribut d . Si vous souhaitez en connatre plus sur le format SVG afin de mieux le cerner et de lutiliser dans vos futures animations, je vous conseille les sites suivants : http://www.w3schools.com/svg/default.asp (anglais) http://svground.free.fr/ (franais)

Ainsi que les outils suivants : http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html http://svgeditor.7jigen.net/edit (tudiez loption convert to path )

http://pilatinfo.org/dessin_loc/draw.svg?language=french

La balise <path/> permet de dfinir des formes arbitraires. Elle comporte un attribut obligatoire pour nous d qui sert dfinir les path data, autrement dit la liste de commande permettant de tracer le chemin. Les donnes contenues dans lattribut d sont organises par 10 commandes : Commence un nouveau sous-trac au point de coordonnes (x,y) donn. Un M (majuscule) annonce que des coordonnes absolues vont suivre, un m (minuscule) des coordonnes relatives. Si une commande "moveto" relative ( m) apparat comme premier lment du trac, alors elle est considre comme reprsentant une paire de coordonnes absolues. Achve le sous-trac courant par le dessin d'une ligne droite, du point courant jusqu'au point initial du sous-trac courant Dessine une ligne du point courant jusqu'au point de coordonnes (x,y) donn, qui devient le nouveau point courant. Un L (majuscule) annonce que des coordonnes absolues vont suivre, un l (minuscule) des coordonnes relatives. On peut spcifier un certain nombre de paires de coordonnes pour le dessin d'un polygone. Une fois la commande excute, le nouveau point courant s'tablit au dernier jeu de coordonnes fourni. Dessine une ligne horizontale du point courant (cpx, cpy) jusqu'au point (x, cpy). Un H (majuscule) annonce que des coordonnes absolues vont suivre, un h (minuscule) des coordonnes relatives. On peut fournir plusieurs valeurs x (bien que cela n'ait gnralement aucun sens). Une fois la commande excute, le nouveau point courant devient (x, cpy) pour la valeur finale de x. Dessine une ligne verticale du point courant (cpx, cpy) jusqu'au point (cpx, y). Un V (majuscule) annonce que des coordonnes absolues vont suivre, un v (minuscule) des

M Z

MoveTo

closepath

lineto

lineto horizontal

lineto vertical

coordonnes relatives. Une fois la commande excute, le nouveau point courant devient (cpx, y) pour la valeur finale de y. Dessine une courbe de Bzier cubique du point courant jusqu'au point (x,y) en utilisant (x1,y1) comme point de contrle en dbut de courbe et (x2,y2) en fin de courbe. Un C (majuscule) annonce que des coordonnes absolues vont suivre, un c (minuscule) des curveto coordonnes relatives. On peut spcifier plusieurs jeux de coordonnes pour le dessin d'un polybzier. Une fois la commande excute, le nouveau point courant devient la dernire paire de coordonnes utilise dans le polybzier. Dessine une courbe de Bzier cubique du point courant jusqu'au point (x,y). Le premier point de contrle est sens tre le reflet du second point de contrle de la commande prcdente par rapport au point courant. (S'il n'y a pas de commande prcdente ou si celle-ci n'tait pas une commande C, c, S ou s, le premier point de contrle est suppos concider avec le curveto point courant). Le point ((x2,y2) est le second point de contrle (le point de contrle en fin raccourci/liss de courbe). Un S (majuscule) annonce que des coordonnes absolues vont suivre, un s (minuscule) des coordonnes relatives. On peut spcifier plusieurs jeux de coordonnes pour le dessin d'un polybzier. Une fois la commande excute, le nouveau point courant devient la paire de coordonnes (x,y) utilise dans le polybzier. Dessine une courbe de Bzier quadratique, du point courant jusqu'au point (x,y), en utilisant le point (x1,y1) comme point de contrle. Un Q (majuscule) annonce que des coordonnes curveto Bzier absolues vont suivre, un q (minuscule) des coordonnes relatives. On peut spcifier plusieurs quadratique jeux de coordonnes pour le dessin d'un polybzier. Une fois la commande excute, le nouveau point courant devient la paire de coordonnes finale (x,y) utilise dans le polybzier. Dessine une courbe de Bzier quadratique, du point courant jusqu'au point (x,y). Le point de contrle est sens tre le reflet du point de contrle de la commande prcdente par curveto Bzier rapport au point de contrle. (S'il n'y a pas de commande prcdente ou si celle-ci n'tait pas quadratique une Q, q, T ou t, le point de contrle est sens concider avec le point courant). Un T raccourci/liss (majuscule) annonce que des coordonnes absolues vont suivre, un t (minuscule) des coordonnes relatives. Une fois la commande excute, le nouveau point courant devient la paire de coordonnes finale (x,y) utilise dans le polybzier. Dessine un arc elliptique, du point courant jusqu'au point ( x, y). La taille et l'orientation de l'ellipse sont dfinies par deux rayons (rx, ry) et une valeur de rotation sur l'axe-x rotationaxe-x, qui indique la rotation de l'ellipse dans son ensemble par rapport au systme de arc elliptique coordonnes courant. Le centre de l'ellipse (cx, cy) est calcul automatiquement pour satisfaire aux contraintes imposes par les autres paramtres. Les valeurs drapeau-arc-large et drapeau-balayage contribuent ce calcul automatique et aident dterminer le dessin de l'arc.

Quelques exemples : Point de dpart M <path d="M x1 y1"/>

Ligne horizontale H <path d="M x1 y1 H x2"/>

Ligne verticale V <path d="M x1 y1 V y2"/>

Ligne L <path d="M x1 y1 L x2 y2"/>

Courbe de Bzier quadratique Q <path d="M x1 y1 Q cx cy x2 y2"/>

Courbe de Bzier quadratique avec partage de point de contrle T <path d="M x1 y1 Q cx cy x2 y2 T x3 y3"/>

Courbe de Bzier cubique C <path d="M x1 y1 C cx1 cy1 cx2 cy2 x2 y2"/>

Courbe de Bzier cubique avec partage de point de contrle S <path d="M x1 y1 C cx1 cy1 cx2 cy2 x2 y2 S cx3 cy3 x3 y3"/>

Fermeture du chemin par une ligne Z <path d="M x1 y1 Q cx cy x2 y2 Z"/>

Notre exercice
Maintenant que nous avons un aperu de ce qui nous attend, nous allons crer une fentre avec ViewPort (comme dans le tutoriel 2) et inclure une image de 50x50 laquelle nous allons attribuer un TPathAnimation et que nous allons dplacer avec un chemin. Plus la peine de dtailler la procdure, vous devez tre en mesure de le faire aisment. Cela donnera au final ceci :

Si vous compilez maintenant, vous aurez exactement le mme rsultat quau -dessus, une toile fige. Nous allons donc crer un chemin, que nous allons assigner laction de cliquer sur un bouton dans la partie gauche de lcran, sur lequel nous dplacerons notre toile. Pourquoi une toile ? Vous verrez, la fin je vous proposerai un exercice pour lequel vous en aurez besoin. Je ne vais pas tout vous dtailler mais nous allons pour dplacer notre toile insrer notre attribut d dans le concepteur de chemin en cliquant sur PathAnimation.Path . Exemple pour un cercle form par 2 arcs elliptiques :

Voil, il ne vous reste qu tudier lexemple fourni avec ce tutoriel pour saisir le principe.

Je vous propose un exercice que vous devez tre capable de mettre en uvre maintenant, la cration du drapeau europen avec ses 12 toiles qui suivent un cercle complet sur lensemble du drapeau, et o chaque toile est en rotation sur elle-mme. Le premier qui lenvoie sera publi sur Delphinautes.fr.

crit par BEAUMONT Christophe le 18 Novembre 2011 www.delphinautes.fr