Dessin de lignes et de courbes

Pour utiliser la propriété graphics d’une occurrence de Shape, Sprite ou MovieClip, vous devez d’abord définir le style (épaisseur et couleur de la ligne, couleur de remplissage) à utiliser. A l’instar des outils de dessin d’Adobe® Flash® Professional ou de toute autre application de dessin, en ActionScript vous pouvez dessiner avec ou sans trait, et avec ou sans remplissage. Pour indiquer l’apparence du trait, utilisez la méthode lineStyle() ou lineGradientStyle() . Pour créer une ligne pleine, utilisez la méthode lineStyle() . Lors de l’appel de cette méthode, les valeurs les plus courantes à indiquer sont les trois premiers paramètres : épaisseur de ligne, couleur et alpha. Par exemple, la ligne de code suivante indique que la forme myShape doit tracer des lignes de deux pixels d’épaisseur, en rouge (0x990000) et avec une opacité de 75 % :

myShape.graphics.lineStyle(2, 0x990000, .75);

La valeur par défaut du paramètre alpha est 1.0 (100 %), vous pouvez donc l’omettre si vous souhaitez tracer une ligne entièrement opaque. La méthode lineStyle() gère également deux autres paramètres associés à l’indice de lissage des pixels et au mode de mise à l’échelle. Pour plus d’informations sur ces paramètres, voir la description de la méthode Graphics.lineStyle() dans le manuel Guide de référence ActionScript 3.0 pour la plate-forme Adobe Flash .

Pour créer une ligne dégradée, utilisez la méthode lineGradientStyle() . Pour plus d’informations sur cette méthode, voir Création de lignes et de remplissages en dégradé .

Pour créer une forme remplie, appelez les méthodes beginFill() , beginGradientFill() , beginBitmapFill() ou beginShaderFill() avant de débuter le dessin. La plus basique, beginFill() , accepte deux paramètres : la couleur de remplissage et, le cas échéant, la valeur alpha correspondante. Par exemple, pour tracer une forme avec un remplissage vert uni, utilisez le code suivant (on suppose ici que vous dessinez dans un objet nommé myShape ) :

myShape.graphics.beginFill(0x00FF00);

L’appel d’une méthode de remplissage annule implicitement le remplissage précédemment défini avant l’implémentation du nouveau. L’appel d’une méthode qui spécifie un style de trait remplace le style de trait précédent, mais ne modifie pas le remplissage précédemment défini, et vice-versa.

Une fois spécifié le style de ligne et de remplissage, l’étape suivante consiste à indiquer le point de départ du dessin. L’occurrence de Graphics possède un point de traçage, tout comme la pointe d’un crayon sur une feuille de papier. Quel que soit l’emplacement du point de traçage, il représente l’origine de l’action de dessin à venir. Initialement, un objet Graphics débute avec son point de traçage aux points 0,0 dans l’espace de coordonnées de l’objet dans lequel il dessine. Pour que le tracé débute en un autre point, appelez la méthode moveTo() avant d’appeler une des méthodes de dessin. Cet appel peut être comparé à l’action de lever la pointe du crayon du papier et de l’amener à un nouvel emplacement.

Lorsque le point de traçage est en place, utilisez une série d’appels aux méthodes lineTo() (pour tracer des lignes droites) et curveTo() (pour tracer des courbes).

Si vous avez défini une couleur de remplissage, vous pouvez désactiver le remplissage en appelant la méthode endFill() pendant l’opération de dessin. Si vous n’avez pas tracé de forme fermée (autrement dit, si lors de l’appel de la méthode endFill() le point de traçage ne correspond pas au point de départ de la forme), lorsque vous appelez la méthode endFill() , le moteur d’exécution Flash ferme automatiquement la forme en traçant une ligne droite entre le point de traçage actuel et l’emplacement spécifié dans le dernier appel à la méthode moveTo() . Si vous avez débuté un remplissage et n’avez pas appelé endFill() , tout appel à beginFill() (ou à l’une des autres méthodes de remplissage) ferme le remplissage actif et en débute un nouveau.

Lorsque vous appelez la méthode lineTo() , l’objet Graphics trace une ligne droite (en utilisant le style de ligne que vous avez spécifié) entre le point de traçage actuel et les coordonnées que vous transmettez en paramètres à cette méthode. Par exemple, cette ligne de code place le point de traçage aux coordonnées 100, 100 puis trace une ligne jusqu’au point 200, 200 :

myShape.graphics.moveTo(100, 100); 
myShape.graphics.lineTo(200, 200);

L’exemple suivant trace des triangles rouges et verts d’une hauteur de 100 pixels :

var triangleHeight:uint = 100; 
var triangle:Shape = new Shape(); 
 
// red triangle, starting at point 0, 0 
triangle.graphics.beginFill(0xFF0000); 
triangle.graphics.moveTo(triangleHeight / 2, 0); 
triangle.graphics.lineTo(triangleHeight, triangleHeight); 
triangle.graphics.lineTo(0, triangleHeight); 
triangle.graphics.lineTo(triangleHeight / 2, 0); 
 
// green triangle, starting at point 200, 0 
triangle.graphics.beginFill(0x00FF00); 
triangle.graphics.moveTo(200 + triangleHeight / 2, 0); 
triangle.graphics.lineTo(200 + triangleHeight, triangleHeight); 
triangle.graphics.lineTo(200, triangleHeight); 
triangle.graphics.lineTo(200 + triangleHeight / 2, 0); 
 
this.addChild(triangle);

La méthode curveTo() dessine une courbe de Bézier. Elle trace un arc entre deux points (appelés points d’ancrage) courbé en direction d’un troisième point (appelé point de contrôle). L’objet Graphics utilise la position de traçage actuelle comme premier point d’ancrage. Lorsque vous appelez la méthode curveTo() , vous transmettez quatre paramètres : les coordonnées x et y du point de contrôle, puis les coordonnées x et y du second point d’ancrage. Par exemple, le code suivant trace une courbe entre le point 100, 100 et le point 200, 200. Le point de contrôle ayant les coordonnées 175, 125, la courbe est orientée vers la droite puis vers le bas :

myShape.graphics.moveTo(100, 100); 
myShape.graphics.curveTo(175, 125, 200, 200);

L’exemple suivant trace des objets circulaires rouges et verts avec une largeur et une hauteur de 100 pixels. Notez qu’en raison même de la nature de l’équation de Bézier, ces cercles ne sont pas parfaits :

var size:uint = 100; 
var roundObject:Shape = new Shape(); 
 
// red circular shape 
roundObject.graphics.beginFill(0xFF0000); 
roundObject.graphics.moveTo(size / 2, 0); 
roundObject.graphics.curveTo(size, 0, size, size / 2); 
roundObject.graphics.curveTo(size, size, size / 2, size); 
roundObject.graphics.curveTo(0, size, 0, size / 2); 
roundObject.graphics.curveTo(0, 0, size / 2, 0); 
 
// green circular shape 
roundObject.graphics.beginFill(0x00FF00); 
roundObject.graphics.moveTo(200 + size / 2, 0); 
roundObject.graphics.curveTo(200 + size, 0, 200 + size, size / 2); 
roundObject.graphics.curveTo(200 + size, size, 200 + size / 2, size); 
roundObject.graphics.curveTo(200, size, 200, size / 2); 
roundObject.graphics.curveTo(200, 0, 200 + size / 2, 0); 
 
this.addChild(roundObject);