Você usa os métodos
beginGradientFill()
e
lineGradientStyle()
da classe flash.display.Graphics para definir gradientes para usar em formas. Ao definir um gradiente, você fornece uma matriz como um dos parâmetros desses métodos.
A maneira mais fácil de definir a matriz é utilizando o método
createGradientBox()
da classe Matrix, que cria uma matriz utilizada para definir o gradiente. Você define a escala, a rotação e a posição do gradiente utilizando os parâmetros passados para o método
createGradientBox()
. O método
createGradientBox()
aceita os seguintes parâmetros:
-
Largura da caixa de gradientes: a largura (em pixels) para a qual o gradiente será ampliado.
-
Altura da caixa de gradientes: a altura (em pixels) para a qual o gradiente será ampliado.
-
Rotação da caixa de gradientes: a rotação (em radianos) que será aplicada ao gradiente.
-
Movimentação horizontal: a distância (em pixels) que o gradiente se deslocará horizontalmente.
-
Movimentação vertical: a distância (em pixels) que o gradiente se deslocará verticalmente.
Por exemplo, considere um gradiente com as seguintes características:
-
GradientType.LINEAR
-
Duas cores, verde e azul, com a matriz de
proporções
definidas para
[0, 255]
.
-
SpreadMethod.PAD
-
InterpolationMethod.LINEAR_RGB
Os seguintes exemplos mostram gradientes nos quais o parâmetro
rotation
do método
createGradientBox()
é diferente conforme indicado, mas todas as configurações permanecem as mesmas:
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;
|
|
Os seguintes exemplos mostram os efeitos de um gradiente linear verde para azul no qual os parâmetros
rotation
,
tx
e
ty
do método
createGradientBox()
são diferentes conforme indicado, mas todas as outras configurações permanecem as mesmas:
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;
|
|
Os parâmetros
width
,
height
,
tx
e
ty
do método
createGradientBox()
também afetam o tamanho e a posição de um preenchimento de gradiente
radial
, conforme mostram os exemplos a seguir:
width = 50;
height = 100;
rotation = 0;
tx = 25;
ty = 0;
|
|
O código a seguir produz o último gradiente radial ilustrado:
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);
Observe que a largura e a altura do preenchimento de gradiente são determinadas pela largura e altura da matriz de gradientes em vez da largura e altura desenhadas utilizando o objeto Graphics. Ao desenhar com objetos Graphics, você desenha o que existe naquelas coordenadas na matriz de gradiente. Mesmo que você use um dos métodos shape de um objeto Graphics como
drawRect()
, o gradiente não se amplia para o tamanho da forma que é desenhada — o tamanho do gradiente deve ser especificado na própria matrix de gradiente.
A seguir está uma ilustração da diferença visual entre as dimensões da matrix de gradiente e das dimensões do próprio desenho.
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);
Esse código desenha três gradientes com o mesmo estilo de preenchimento, especificado com uma distribuição igual de vermelho, verde e azul. Os gradientes são desenhados utilizando o método
drawRect()
com larguras de pixel de 50, 100 e 150 respectivamente. A matriz de gradiente que é especificada no método
beginGradientFill()
é criada com uma largura de 100 pixels. Isso significa que o primeiro gradiente engloba apenas meio espectro de gradiente, o segundo engloba todo ele e o terceiro engloba todo ele e tem 50 pixels adicionais de azul estendidos para a direita.
O método
lineGradientStyle()
funciona de modo semelhante a
beginGradientFill()
exceto pelo fato de que ao definir o gradiente, você deve especificar a espessura do traço utilizando o método
lineStyle()
antes do desenho. O código a seguir desenha uma caixa com um traçado gradiente vermelho, verde e azul:
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);
Para obter mais informações sobre a classe Matrix, consulte
Uso de objetos Matrix
.