L’API de dessin : les droites et les courbes

Dessiner des droites et des courbes avec l'API de dessin en ActionScript 3 (AS3).

L'ActionScript permet la création de dessin vectoriel. Contrairement à l'ActionScript 2, l'AS3 permet, en plus des lignes et des courbes, de créer des formes (carré, rectangle, ellipse, cercle...) via des fonctionnalitées intégrées.

Ces fonctionnalités sont appelées API de dessin et permettent de créer des dessins vectoriels.

Grâce à cette API de dessin, il vous sera possible de dessiner dynamiquement la forme de vos boutons, de présenter facilement des données numériques sous forme de graphiques...

L'ActionScript 3, à travers son lot de nouvelles classes, va vous permettre de séparer correctement les différents travaux de dessin que vous aurez à réaliser.

La classe Graphics

La classe de base du dessin vectoriel est la classe Graphics. Elle comporte des méthodes et des propriétés permettant de tracer des lignes, des remplissages et des formes.

Il est impossible d'instancier directement la classe Graphics. On utilisera la propriété graphics des objets d'affichage qui prennent en charge le dessin. Ces objets seront des objets de type Shape, Sprite ou des classes dérivées.

La classe Shape

La classe Shape sert à créer des formes simples via l'API de dessin. Cette classe comprend donc une propriété graphics qui vous permet d'accéder aux méthodes de dessin de la classe Graphics.

La classe Shape hérite de la classe DisplayObject, ce qui signifie qu'on ne pourra dessiner qu'une seule forme dans un objet de ce type. D'autre part, cette classe n'hérite pas de la classe InteractiveObject, ce qui signifie qu'il ne sera pas possible de définir des événements de souris ou de clavier sur ces objets.

Dessiner un droite

Le dessin d'une droite en ActionScript 3 va être réalisé en différentes étapes :

• Création d'une instance de type Shape
• Définition du style de trait (épaisseur de ligne, couleur de ligne et opacité)
• Déplacement de la position de dessin vers les coordonnées initiales de la droite
• Dessin de la droite entre la position initiale et la position finale

Les classes Shape et Graphics vont nous permettre de créer du dessin vectoriel en ActionScript.

Création d'une instance de type Shape

La classe Shape possède un constructeur qui ne prend aucun paramètre.

Définition du style de trait

Avant de dessiner la droite, vous devez d'abord définir le style du trait (épaisseur, couleur, opacité...).

C'est la méthode lineStyle() de la classe Graphics qui va vous permettre de le faire.

• 1 seul paramètre de cette méthode est obligatoire, c'est la largeur du trait. Elle sera exprimée par un entier qui indique l'épaisseur de la ligne en points. Les valeurs possibles varient entre 0 et 255.
• Le second paramètre, qui lui est facultatif, permet de définir la couleur de la ligne au format héxadécimal. Si aucune valeur n'est indiquée, la valeur par défaut est le noir (0x000000).
• Le troisième paramètre, lui aussi facultatif, permet de définir l'opacité de la couleur de la ligne. Les valeurs varient entre 0 (transparent) et 1 (opaque). La valeur par défaut est 1.

Nous allons définir un trait d'une épaisseur de 20 points, de couleur rouge et opaque.

Nous appelerons la méthode lineStyle() au travers de la propriété graphics de notre objet Shape.

Déplacement de la position de dessin vers les coordonnées initiales de la droite

Nous allons déplacer la position de dessin en utilisant la méthode moveTo() de la classe Graphics.

Cette méthode prend paramètres 2 nombres indiquant la position horizontale et verticale par rapport au point d'alignement de l'objet d'affichage parent.

Dessin de la droite entre la position initiale et la position finale

Pour dessiner la droite, nous allons utiliser la méthode lineTo() de la classe Graphics.

Cette méthode trace une ligne entre la position de dessin actuelle (dans notre cas, définie par la méthode moveTo) et la position (x, y), passée en paramètre de cette méthode. Une fois la ligne tracée, la position de dessin actuelle est réglée sur les coordonnées passées en paramètres.

Positionnement et affichage de la droite dans la scène

Comme tous les objets d'affichage, nous positionnerons notre droite avec les propriétés x et y et nous l'afficherons avec la méthode addChild() .

Extrémité des lignes

On remarque que par défaut les extrémités de la droite sont arrondies.

Grâce au paramètre caps (6^ème paramètre) de la méthode lineStyle(), nous allons pouvoir contrôler les extrémités de la droite.

Nous allons utiliser la classe CapsStyle pour définir le style des extrémités. Cette classe est une énumération de valeurs constantes qui spécifient le style d'extrémité à utiliser pour tracer les lignes.

Ces constantes sont utilisées en tant que valeurs du paramètre caps dans la méthode lineStyle().

Vous pouvez spécifier les trois types d'extrémités suivants :

• CapsStyle.NONE : aucunes extrémités
• CapsStyle.ROUND : extrémités rondes
• CapsStyle.SQUARE : extrémités carrées

Le 4^ème et 5^ème paramètre ne vont pas nous concernés par l'instant, nous allons donc utiliser leur valeur par défaut. Nous allons définir pour notre droite des extrémités carrées.

Dessiner une courbe

Nous avons vu que la méthode lineStyle() permettait de dessiner une droite. Dès lors que vous allez vouloir dessiner une courbe, vous devrez utiliser la méthode curveTo() de la classe Graphics.

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).

Le premier point d'ancrage est défini par la position actuelle du dessin. Le point de contrôle et le second point d'ancrage sont définis en tant que paramètres de la méthode curveTo().

Dessiner une ligne dégradée

Jusqu'à présent, nous avons créé des lignes ou des courbes en utilisant des couleurs unies. La classe Graphics permet aussi de créer des dégradés.

Nous allons pour cela utiliser la lineGradientStyle() après la méthode lineStyle(). En effet, la méthode lineGradientStyle() ne défini pas l'épaisseur du trait, c'est la méthode lineStyle() qui le gère.

La méthode lineGradientStyle() reçoit 4 paramètres obligatoires : type, couleur, alpha et ratio des couleurs.

• Le premier paramètre spécifie le type de dégradé à créer. Les 2 valeurs possibles sont des constantes de la classe GradientType : GradientType.LINEAR pour un dégradé linéaire et GradientType.RADIAL pour un dégradé radial.
• Le second paramètre indique le tableau de valeurs colorimétriques à utiliser. Dans un dégradé linéaire, les couleurs sont organisées de gauche à droite. Dans un dégradé radial, les couleurs sont organisées de l'intérieur à l'extérieur. L'ordre des couleurs dans le tableau représente l'ordre dans lequel elles sont tracées dans le dégradé.
• Le troisième paramètre indique les valeurs de transparence alpha pour les couleurs du tableau des couleurs.
• Le quatrième paramètre spécifie les rapports, c'est-à-dire l'importance de chaque couleur dans le dégradé. La plage de valeurs possible va de 0 à 255. Ces valeurs représentent la position au sein du dégradé : 0 représente le début du dégradé, et 255 la fin. Cette plage de rapports doit augmenter séquentiellement et comporter le même nombre d'éléments que les tableaux des couleurs et des valeurs alpha spécifiés comme second et troisième paramètres.

Nous allons créer un dégradé linéaire de trois couleurs : vert au début (0x00FF00), blanc au milieu (0xFFFFFF) et bleu marine à la fin (0x000088).

Le vert et le bleu seront opaque et le blanc aura une transparence de 50% : [1, 0.5, 1].

Les couleurs ne seront pas réparties de façon uniforme, le vert sera la couleur dominante. Le vert démarrera à gauche (0), le bleu sera à droite du dégradé (255) et le blanc sera au ¾ du dégradé (190). [0, 190, 255]

Nous remarquons que par défaut le dégradé n'est pas étiré sur la largeur de la ligne. Pour remédier à ce problème, nous allons définir le 5^ème paramètre de la méthode.

Ce paramètre défini une matrice de transformation du dégradé et accepte une instance de la classe Matrix.

Création d'un objet de type Matrix pour le dégradé

La classe Matrix représente une matrice de transformation que l'on peut utiliser pour appliquer diverses transformations graphiques à un objet d'affichage.

Nous allons ensuite utiliser la méthode createGradientBox() de la classe Matrix pour définir la largeur et la hauteur du dégradé.

Nous allons définir la largeur du dégradé sur 200, valeur correspondant à la largeur de la ligne et la hauteur sur 20, valeur correspondant à l'épaisseur de la ligne.

L'objet de type Matrix est ensuite passé en tant que 5^ème paramètre de la méthode lineGradientStyle().

Nous pouvons contrôler l'angle du dégradé grâce au troisième paramètre de la méthode createGradientBox().