Web codeur Developpement Web

Dans cette article (drawGraphicsData et drawPath), j’ai présenté plusieurs nouvelles méthodes et classes de l’API de dessin AS3 (Flash CS4), maintenant il est temps de détailler le fonctionnement, commençons par drawPath.

Documentation :

• flash.display.Graphics
• flash.display.Graphics.drawPath()

Voici sa déclaration tel que reprise de la documentation :

public function drawPath(commandes:Vector., positions:Vector., winding:String = "evenOdd"):void

commandes : représente un tableau typé ne pouvant contenir que des entiers, chaque entier représente une commande de dessin, la liste des commandes accepté est représenté par les propriétés statiques de la classe GraphicsPathCommand :

• NO_OP : int = 0 (ne rien faire)
• MOVE_TO : int = 1 (meme comportement que moveTo())
• LINE_TO : int = 2 (meme comportement que lineTo())
• CURVE_TO : int = 3 (meme comportement que curveTo())
• WIDE_MOVE_TO : int = 4 (pareil que MOVE_TO mais utilise 4 valeurs du tableau positions au lieu de 2)
• WIDE_LINE_TO : int = 5 (pareil que LINE_TO mais utilise 4 valeurs du tableau positions au lieu de 2)

positions : un tableau typé de nombre représentant les positions X et Y pour les commandes.
Attention : les données X et Y sont stockés a la suite dans le tableau (d’abord le X et à la ligne suivante le Y).

winding : permet de spécifier la règle de remplissage pour les intersections ou chevauchement de zone, la valeur accepté est représenté par une des propriétés statiques de la classe GraphicsPathWinding :

• EVEN_ODD : String = « evenOdd »
• NON_ZERO : String = « nonZero »

Exemple :

Pour dessiner une ligne partant de 100, 100 et allant a 300, 100 (ligne droite de 200px), on va définir :

var commandes:Vector.<int> = new Vector.<int>();
commandes.push(GraphicsPathCommand.MOVE_TO);
commandes.push(GraphicsPathCommand.LINE_TO);

ou directement :

commandes.push(1);
commandes.push(2);

ou encore :

commandes[0] = 1;
commandes[1] = 2;

ensuite déclarons le tableau des positions :

var positions:Vector.<Number> = new Vector.<Number>();
positions.push(100);
positions.push(100);
positions.push(300);
positions.push(100);

Dés que les 2 tableaux sont déclarés, il suffit d’exécuter la méthode :

this.graphics.lineStyle(1, 0, 1);
this.graphics.drawPath(commandes, positions);

info supplémentaire : Les arguments que reçoit drawPath sont définis de la même manière que dans une occurrence de la classe GraphicsPath, voici un exemple équivalent aux 2 déclarations précédentes des tableaux commandes et positions.

var gp:GraphicsPath = new GraphicsPath();
gp.moveTo(100, 100);
gp.lineTo(300, 100);

On peut ensuite utiliser ces données avec drawPath de cette maniere :

this.graphics.drawPath(gp.commands, gp.data);

simple, non ?
mais pourquoi avoir fait tout ca alors qu’un simple moveTo() et lineTo() aurait suffit ? -> Pour un début de réponse, voir la fin de l’article (drawGraphicsData et drawPath).