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.
