Criação de linhas e preenchimentos gradientes

Flash Player 9 e posterior, Adobe AIR 1.0 e posterior

O objeto graphics também pode desenhar traçados e preenchimentos com gradientes em vez de cores sólidas. Um traçado gradiente é criado com o método lineGradientStyle() e um preenchimento de gradiente é criado com o método beginGradientFill().

Os dois métodos aceitam os mesmos parâmetros. Os primeiros quatro são obrigatórios: tipo, cores, alfas e proporções. Os outros quatro são opcionais, mas úteis para personalização avançada.

  • O primeiro parâmetro especifica o tipo de gradiente que está criando. Os valores aceitáveis são GradientType.LINEAR ou GradientType.RADIAL.

  • O segundo parâmetro especifica a matriz dos valores de cor que serão utilizados. Em um gradiente linear, as cores serão organizadas da esquerda para a direita. Em um gradiente radial, as cores serão organizadas de dentro para fora. A ordem das cores da matriz representa a ordem em que elas serão desenhadas no gradiente.

  • O terceiro parâmetro especifica os valores de transparência alfa das cores correspondentes no parâmetro anterior.

  • O quarto parâmetro especifica as proporções ou a ênfase que cada cor tem no gradiente. A faixa de valores aceitável é de 0 a 255. Esses valores não representam a largura ou a altura, mas a posição no gradiente; 0 representa o início do gradiente e 255 representa o final do gradiente. A matriz de proporções deve aumentar seqüencialmente e tem o mesmo número de entradas que as matrizes de cores e alfa especificadas no segundo e no terceiro parâmetros.

Embora o quinto parâmetro, a matriz de transformação, seja opcional, ele é normalmente usado porque fornece um modo fácil e eficiente de controlar a aparência do gradiente. Esse parâmetro aceita uma ocorrência Matrix. O modo mais fácil de criar um objeto Matrix para um gradiente é usar o método createGradientBox() da classe Matrix.

Definição de um objeto Matrix para usar com um gradiente

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.