Petit cours sur l’API de dessin
AH ! L’api de dessin ! Merveilleuse api. Toutes ces formes générées automatiquement, avec une grosse classe qui va bien, et avec des rayons de courbure dynamique, et des transferts de couleur et DES BEZIERS PARTOUT ET …… hum… je m’emballe … et si on commençait par le commencement ?
On trouve beaucoup de ressources sur le web. Je vous propose simplement de créer dynamiquement une forme à partir d’un tableau de coordonnées de points.
Les bases
L’api de dessin regroupe un certain nombre de méthode permettant la construction dynamique de forme. Les plus importantes d’entre elles sont moveTo, lineTo, curveTo.
// permet de placer le point d’origine de la forme moveTo(px, py); // permet de joindre le point d’origine précédent // au point (px, py) lineTo(px, py); // permet, tout comme le lineTo, de joindre le point d’origine // précédent au point (px, py), à la différence qu’il intègre // un point de control (cx, cy) donnant l’orientation // de la courbure curveTo(cx, cy, px, py);
Le tableau de vecteur
Afin de dessiner une forme dynamique, nous avons besoin de définir un tableau de coordonnées de vecteur. Ce tableau regroupe des Object, définissant 1 point. 1 point est représenter par sa position (x, y) et au besoin par la position de son point de control (pour la courbure). Nous nommerons « px », « py » la position du point et « cx », « cy » le point de control du vecteur.
// Déclaration du tableau
var tab:Array = new Array();
// Ajout des Object vecteur
tab = [
{px:200, py:300, cx:200, cy:200},
{px:300, py:400, cx:200, cy:400},
{px:450, py:450},
{px:400, py:300, cx:400, cy:400},
{px:450, py:220},
{px:300, py:200, cx:400, cy:200},
{px:150, py:150, cx:250, cy:200}
];
Création de la forme
En premier lieu il faut définir l’apparence de la forme : le style de la ligne avec la méthode lineStyle) et la couleur de la forme.
// Non obligatoire : efface toutes formes préalablement // créer avec l’api de dessin this.clear(); //definition de la ligne (taille=1, couleur=#333333, alpha=100) this.lineStyle(1, 0x333333, 100); //définition du fond (couleur=#F7F7F7, alpha=100) this.beginFill(0xF7F7F7, 100); //CODE DE CREATION // Définit la fin de la forme this.endFill();
Pour créer la forme, il faut tout d’abord placer le point d’origine avec la méthode moveTo. Si le moveTo n’est pas présent, le point d’origine sera (0, 0) ;
Nous prendrons comme origine le dernier élément du tableau
// Définition du point d’origine this.moveTo(tab[tab.length-1].px, tab[tab.length-1].py);
Ensuite il faut lire chaque Object du tableau et appliquer une méthode lineTo ou curveTo en fonction de la déclaration ou non d’un point de courbure. Nous utiliserons un opérateur conditionnel pour ce test.
// Passage dans les lignes du tableau
for (var i=0; i<tab.length; i++)
{
// Si le point de control cx n'est pas définit,
// on applique un lineTo, sinon un curveTo
tab[i].cx == undefined ?
this.lineTo(tab[i].px, tab[i].py) :
this.curveTo(tab[i].cx, tab[i].cy, tab[i].px, tab[i].py);
}
Et c’est tout ! Vous avez votre forme créée dynamiquement ! A vous de jouer pour créer votre propre classe. Vous pouvez utiliser aussi des dégradés de ligne, de fond, etc….
Code source final
// Déclaration du tableau
var tab:Array = new Array();
// Ajout des Object vecteur
tab = [
{px:200, py:300, cx:200, cy:200},
{px:300, py:400, cx:200, cy:400},
{px:450, py:450},
{px:400, py:300, cx:400, cy:400},
{px:450, py:220},
{px:300, py:200, cx:400, cy:200},
{px:150, py:150, cx:250, cy:200}
];
// Non obligatoire : efface toutes formes préalablement
// créer avec l’api de dessin
this.clear();
//definition de la ligne (taille=1, couleur=#333333, alpha=100)
this.lineStyle(1, 0x333333, 100);
//definition du fond (couleur=#F7F7F7, alpha=100)
this.beginFill(0xF7F7F7, 100);
// Définition du point d’origine
this.moveTo(tab[tab.length-1].px, tab[tab.length-1].py);
// Passage dans les lignes du tableau
for (var i=0; i<tab.length; i++)
{
// Si le point de control cx n'est pas définit,
// on applique un lineTo, sinon un curveTo
tab[i].cx == undefined ?
this.lineTo(tab[i].px, tab[i].py) :
this.curveTo(tab[i].cx, tab[i].cy, tab[i].px, tab[i].py);
}
// Définit la fin de la forme
this.endFill();
Quelques liens pour aller plus loin :
- Documentation de la classe MovieClip (à voir : les méthodes relatives au dessin dynamique)
- TechNotes sur les différences entre Bézier cubique et Bézier quadratique (PDF - en anglais)
- Récupération automatique des points de vecteurs via les méthodes JSFL (conception de commande additionnelle pour Flash)
