Création de lignes et de remplissages en dégradé

Utilisez les méthodes beginGradientFill() et lineGradientStyle() de la classe flash.display.Graphics pour définir les dégradés à utiliser dans des formes. Lorsque vous définissez un dégradé, vous fournissez une matrice comme l’un des paramètres de ces méthodes.

La façon la plus facile de définir la matrice est d’utiliser la méthode createGradientBox() , de la classe Matrix, qui définit un tableau utilisé pour définir le dégradé. Définissez l’échelle, la rotation et la position du dégradé à l’aide des paramètres transmis à la méthode createGradientBox() . La méthode createGradientBox() reçoit les paramètres suivants :

• Largeur de la zone de dégradé : largeur (en pixels) sur laquelle s’étend le dégradé

• Hauteur de la zone de dégradé : hauteur (en pixels) sur laquelle s’étend le dégradé

• Rotation de la zone de dégradé : rotation (en radians) qui sera appliquée au dégradé

• Translation horizontale : distance (en pixels) de déplacement horizontal du dégradé

• Translation verticale : distance (en pixels) de déplacement vertical du dégradé

Par exemple, supposons un dégradé possédant les caractéristiques suivantes :

• GradientType.LINEAR

• Deux couleurs, vert et bleu, avec le tableau ratios défini sur [0, 255]

• SpreadMethod.PAD

• InterpolationMethod.LINEAR_RGB

Les exemples suivants présentent des dégradés dans lesquels le paramètre rotation de la méthode createGradientBox() varie comme indiqué, mais tous les autres réglages restent inchangés :

Les exemples suivants présentent les effets sur un dégradé linéaire vert à bleu dans lequel les paramètres rotation , tx et ty de la méthode createGradientBox() varient comme indiqué, mais tous les autres réglages restent inchangés :

Les paramètres width , height , tx et ty de la méthode createGradientBox() ont une incidence sur la taille et la position d’un remplissage en dégradé radial également, comme indiqué dans l’exemple suivant :

Le code suivant produit le dernier dégradé radial illustré :

import flash.display.Shape; 
import flash.display.GradientType; 
import flash.geom.Matrix; 
 
var type:String = GradientType.RADIAL; 
var colors:Array = [0x00FF00, 0x000088]; 
var alphas:Array = [1, 1]; 
var ratios:Array = [0, 255]; 
var spreadMethod:String = SpreadMethod.PAD; 
var interp:String = InterpolationMethod.LINEAR_RGB; 
var focalPtRatio:Number = 0; 
 
var matrix:Matrix = new Matrix(); 
var boxWidth:Number = 50; 
var boxHeight:Number = 100; 
var boxRotation:Number = Math.PI/2; // 90° 
var tx:Number = 25; 
var ty:Number = 0; 
matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty); 
 
var square:Shape = new Shape; 
square.graphics.beginGradientFill(type,  
                            colors, 
                            alphas, 
                            ratios,  
                            matrix,  
                            spreadMethod,  
                            interp,  
                            focalPtRatio); 
square.graphics.drawRect(0, 0, 100, 100); 
addChild(square);

Notez que la largeur et la hauteur du dégradé sont déterminées par la largeur et la hauteur de la matrice du dégradé, plutôt que par celles qui sont dessinées à l’aide de l’objet Graphics. Si vous dessinez avec l’objet Graphics, vous tracez ce qui existe à ces coordonnées dans la matrice du dégradé. Même si vous utilisez l’une des méthodes de création de forme d’un objet de type Graphics, par exemple drawRect() , le dégradé n’est pas étiré en fonction de la taille de la forme dessinée : sa taille doit être spécifiée dans la matrice du dégradé.

L’exemple ci-dessous illustre la différence visuelle entre les dimensions de la matrice du dégradé et celles du dessin :

var myShape:Shape = new Shape(); 
var gradientBoxMatrix:Matrix = new Matrix(); 
gradientBoxMatrix.createGradientBox(100, 40, 0, 0, 0); 
myShape.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); 
myShape.graphics.drawRect(0, 0, 50, 40); 
myShape.graphics.drawRect(0, 50, 100, 40); 
myShape.graphics.drawRect(0, 100, 150, 40); 
myShape.graphics.endFill(); 
this.addChild(myShape);

Ce code trace trois dégradés avec le même style de remplissage, spécifié avec une distribution égale de rouge, vert et bleu. Les dégradés sont tracés à l’aide de la méthode drawRect() avec des largeurs en pixels de 50, 100 et 150 respectivement. La matrice de dégradé qui est spécifiée dans la méthode beginGradientFill() est créée avec une largeur de 100 pixels. Le premier dégradé ne couvre donc que la moitié de son spectre, le deuxième le couvre en entier, et le troisième le couvre en entier et possède 50 pixels supplémentaires de bleu à droite.

La méthode lineGradientStyle() fonctionne de façon similaire à beginGradientFill() , si ce n’est qu’outre la définition du dégradé vous devez aussi indiquer l’épaisseur du trait à l’aide de la méthode lineStyle() avant de tracer. Le code suivant trace une boîte avec un trait dégradé rouge, vert et bleu :

var myShape:Shape = new Shape(); 
var gradientBoxMatrix:Matrix = new Matrix(); 
gradientBoxMatrix.createGradientBox(200, 40, 0, 0, 0); 
myShape.graphics.lineStyle(5, 0); 
myShape.graphics.lineGradientStyle(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); 
myShape.graphics.drawRect(0, 0, 200, 40); 
this.addChild(myShape);

Pour plus d’informations sur la classe Matrix, voir Utilisation des objets Matrix .