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
.