Creazione di linee sfumate e riempimenti con gradiente

Flash Player 9 e versioni successive, Adobe AIR 1.0 e versioni successive

L'oggetto Graphics può disegnare tratti e riempimenti anche con gradienti anziché con colori uniformi. Per creare un tratto sfumato si utilizza il metodo lineGradientStyle(), mentre per il riempimento con gradiente si utilizza il metodo beginGradientFill().

I due metodi accettano gli stessi parametri. I primi quattro sono: tipo, colori, alfa e proporzioni. I quattro parametri rimanenti sono opzionali ma utili nei casi di personalizzazione avanzata.

  • Il primo parametro specifica il tipo di gradiente che si sta creando. I valori accettabili sono GradientType.LINEAR e GradientType.RADIAL.

  • Il secondo parametro specifica l'array di valori di colore da utilizzare. In un gradiente lineare, i colori vengono disposti da sinistra a destra. In un gradiente radiale, i colori vengono disposti dall'interno verso l'esterno. L'ordine dei colori dell'array rappresenta l'ordine con cui i colori verranno disegnati nel gradiente.

  • Il terzo parametro specifica i valori di trasparenza alfa per i colori corrispondenti nel parametro precedente.

  • Il quarto parametro specifica la proporzione, o l'enfasi, di ciascun colore all'interno del gradiente. I valori accettabili sono compresi tra 0 e 255. Questi valori non rappresentano alcuna larghezza o altezza, bensì la posizione all'interno del gradiente; 0 rappresenta l'inizio del gradiente, 255 rappresenta la fine. L'array di proporzioni deve aumentare in sequenza e avere lo stesso numero di voci degli array di colori e di valori alfa specificati nel secondo e nel terzo parametro.

Benché sia opzionale, il quinto parametro (la matrice di trasformazione) viene utilizzata spesso, poiché fornisce un modo semplice e potente per controllare l'aspetto del gradiente. Questo parametro accetta un'istanza Matrix. Il modo più semplice per creare un oggetto Matrix per un gradiente consiste nell'utilizzare il metodo createGradientBox() della classe Matrix.

Definizione di un oggetto Matrix da usare con un gradiente

Potete usare i metodi beginGradientFill() e lineGradientStyle() della classe flash.display.Graphics per la definizione di gradienti da usare nelle forme. Nella definizione di un gradiente, si fornisce una matrice come uno dei parametri di questi metodi.

Il modo più semplice per definire la matrice consiste nell'usare il metodo createGradientBox() della classe Matrix, che crea una matrice usata per definire il gradiente. È possibile definire la scala, la rotazione e la posizione del gradiente usando i parametri passati al metodo createGradientBox(). Il metodo createGradientBox() accetta i parametri seguenti:

  • Larghezza riquadro del gradiente: la larghezza (in pixel) dell'espansione del gradiente

  • Altezza riquadro del gradiente: l'altezza (espressa in pixel) dell'espansione del gradiente

  • Rotazione riquadro del gradiente: la rotazione (espressa in radianti) applicata al gradiente

  • Traslazione orizzontale: quantità di spazio (espressa in pixel) per cui un gradiente viene spostato in senso orizzontale

  • Traslazione verticale: quantità di spazio (espressa in pixel) per cui un gradiente viene spostato in senso verticale

Considerate ad esempio un gradiente con le seguenti caratteristiche:

  • GradientType.LINEAR

  • Due colori, verde e blu, con gli array ratios impostati su [0, 255]

  • SpreadMethod.PAD

  • InterpolationMethod.LINEAR_RGB

Gli esempi seguenti contengono gradienti in cui il parametro rotation del metodo createGradientBox() differisce nel modo indicato e tutte le altre impostazioni rimangono invariate:

width = 100;

height = 100;

rotation = 0;

tx = 0;

ty = 0;

width = 100;

height = 100;

rotation = Math.PI/4; // 45°

tx = 0;

ty = 0;

width = 100;

height = 100;

rotation = Math.PI/2; // 90°

tx = 0;

ty = 0;

Gli esempi seguenti illustrano gli effetti su un gradiente lineare verde-blu in cui i parametri rotation, tx e ty del metodo createGradientBox() differiscono come indicato e tutte le altre impostazioni rimangono invariate:

width = 50;

height = 100;

rotation = 0;

tx = 0;

ty = 0;

width = 50;

height = 100;

rotation = 0

tx = 50;

ty = 0;

width = 100;

height = 50;

rotation = Math.PI/2; // 90°

tx = 0;

ty = 0;

width = 100;

height = 50;

rotation = Math.PI/2; // 90°

tx = 0;

ty = 50;

I parametri width, height, tx e ty del metodo createGradientBox() influenzano anche la dimensione e la posizione di un riempimento con gradiente radiale, come illustra l'esempio seguente:

width = 50;

height = 100;

rotation = 0;

tx = 25;

ty = 0;

Il codice seguente genera l'ultimo gradiente radiale illustrato:

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

Notate che la larghezza e l'altezza del riempimento con gradiente vengono determinate dalla larghezza e dall'altezza della matrice del gradiente anziché dalla larghezza o dall'altezza disegnate mediante l'oggetto Graphics. Quando si disegna mediante l'oggetto Graphics, si disegna ciò che esiste in corrispondenza di tali coordinate nella matrice del gradiente. Anche se utilizzate uno dei metodi shape di un oggetto Graphics come drawRect(), il gradiente non si allunga fino a coprire le dimensioni della forma che state disegnando: le dimensioni del gradiente devono essere specificate nella matrice del gradiente.

L'esempio seguente illustra la differenza visiva tra le dimensioni della matrice del gradiente e le dimensioni del disegno vero e proprio:

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

Questo codice disegna tre gradienti con lo stesso stile di riempimento, specificato con una distribuzione uniforme di rosso, verde e blu. I gradienti vengono disegnati mediante il metodo drawRect() con larghezze rispettivamente di 50, 100 e 150 pixel. La matrice del gradiente specificata nel metodo beginGradientFill() viene creata con una larghezza di 100 pixel. Ciò significa che il primo gradiente comprende solo metà dello spettro del gradiente, il secondo lo comprende tutto e il terzo lo comprende tutto e ha 50 pixel aggiuntivi di blu che si estendono verso destra.

Il metodo lineGradientStyle() funziona in modo simile a beginGradientFill() con l'eccezione che, oltre a definire il gradiente, è necessario specificare lo spessore del tratto mediante il metodo lineStyle() prima di disegnare. Il codice seguente disegna un riquadro con un tratto sfumato rosso, verde e blu:

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

Per ulteriori informazioni sulla classe Matrix, vedete Uso degli oggetti Matrix.