ActionScript/A classe graphics

A classe graphics

A classe graphics (flash.display.Graphics) é a responsável por desenhar objetos em vetor no ActionScript 3.0 (veja uma definição sobre desenhos com vetores aqui).

Para desenharmos, precisamos que seja criado um objeto de exibição (como um Sprite) e trabalharmos com métodos e atributos da classe graphics, que vêm junto com o objeto. Veja o exemplo:

var sp:Sprite = new Sprite();

// Desenhando com um objeto graphics
var g:Graphics = sp.graphics;
g.beginFill(0xFF0000, 1);
g.drawRect(10, 10, 300, 200);
g.endFill();

addChild(sp);

Você não precisa criar um objeto graphics necessariamente. Você pode usar reescrevendo junto com o Sprite:

var sp:Sprite = new Sprite();

// Outra maneira de se desenhar o retângulo
sp.graphics.beginFill(0xFF0000, 1);
sp.graphics.drawRect(10, 10, 300, 200);
sp.graphics.endFill();

addChild(sp);

Definindo o preenchimento

Utilize o método beginFill(cor,alfa). O primeiro parâmetro deve ser um valor hexadecimal (no modo 0xRRGGBB), e o segundo um valor entre 0.0 (totalmente transparente) e 1.0 (opaco). Depois você deve chamar os métodos que desenham e por fim um método endFill() para finalizar a arte.

var sp:Sprite = new Sprite();

// Começando o preenchimento
sp.graphics.beginFill(0xFF0000, 1);
// Métodos de desenho (forma, contorno, etc.)
sp.graphics.drawRect(10, 10, 300, 200);
// Finaliza preenchimento
sp.graphics.endFill();

addChild(sp);

Desenhando um retângulo

Utilize o método drawRect(x, y, width, height). O x representa a posição na horizontal que ele irá ocupar; y, a horizontal; width é o tamanho da largura e height, da altura (todos em pixels e valores do tipo Number).

var sp:Sprite = new Sprite();

sp.graphics.beginFill(0xFF0000, 1);

sp.graphics.lineStyle(1, 0x00FF00, 1); // Contorno para o desenho
sp.graphics.drawRect(10, 10, 300, 200);
sp.graphics.endFill();

addChild(sp);

Para adicionar um contorno inserimos o método lineStyle() (veja mais abaixo na seção de linhas e curvas).

Desenhando retângulo com cantos arredondados

Use método drawRoundRect(x, y, width, height, ellipseWidth[, ellipseHeight]). O parâmetro ellipseWidth define a largura do arrendondamento do canto e ellipseHeight (opcional) a altura (são do tipo Number).

var sp:Sprite = new Sprite();

sp.graphics.beginFill(0xFF0000, 1);
sp.graphics.drawRoundRect(100, 100, 200, 150, 25);
sp.graphics.endFill();

addChild(sp);

Desenhando círculo

Use o método drawCircle(x, y, radius) para criar um círculo perfeito. O parâmetro radius (do tipo Number) define o tamanho do círculo (o seu raio). Quanto maior o valor, maior será o círculo.

var sp:Sprite = new Sprite();

sp.graphics.beginFill(0xFF0000, 1);
sp.graphics.drawCircle(50, 50, 25);
sp.graphics.endFill();

addChild(sp);

Desenhando uma elipse

O método drawEllipse(x, y, width, height) lembra o modo de desenhar do retângulo e permite que criemos uma forma de elipse.

var sp:Sprite = new Sprite();

sp.graphics.beginFill(0xFF0000, 1);
sp.graphic.drawEllipse(100, 100, 200, 100);
sp.graphics.endFill();

addChild(sp);

Preenchimento com gradiente

Veja o snippet abaixo:

var gradTipo:String = GradientType.LINEAR;
var cores:Array = [0x000000, 0x000000];
var alfas:Array = [1, 0];
var limites:Array = [0, 255];

var matriz:Matrix = new Matrix();
matriz.createGradientBox(100, 50, 0, 0, 0);

var sp:Sprite = new Sprite();

sp.graphics.beginGradientFill(gradTipo, cores, alfas, limites, matriz); // Aplica o gradiente
sp.graphics.drawRect(0, 0, 100, 100);
sp.graphics.endFill();

addChild(sp);

O gradTipo armazena uma String GradientType.LINEAR, que trata de um gradiente do tipo linear (o outro modo é GradientType.RADIAL, que é circular).

A array cores armazena as cores que serão usadas (no caso, só preto).

Já os alfas lidam com a visibilidade (no caso, será do visível 1 ao invisível 0).

Os limites definem a amplitude de cores com que ser irá trabalhar (como no padrão RGB o limite é de 0 a 255, iremos abranger todo o espectro).

Então criamos um objeto do tipo Matrix (matriz) e criamos uma caixa de gradiente (matriz.createGradientBox()), que leva cinco parâmetros: width e height (largura e altura do preenchimento gradiente, que no nosso exemplo terá o mesmo tamanho do retângulo - 100x100), rotation, grau de rotação do preenchimento, e tx e ty, que interferem na posição do gradiente, em graus (ele rotaciona o ponto de gradiente).

Por fim, aplicamos o gradiente com o método beginGradientFill() e os parâmetros vistos no snippet acima.

Linhas e curvas

Para desenhar linhas retas use os métodos lineStyle() (para definir cores e espessura de linha, entre outras), moveTo() (ponto de início de desenho) e lineTo() (ponto final da linha).

var sp:Sprite = new Sprite();

sp.graphics.lineStyle(1, 0x00FF00, 1); // Linha com espessura 1, cor verde e opaco (alfa 1)
sp.graphics.moveTo(200, 200);
sp.graphics.lineTo(150, 150);

sp.graphics.moveTo(200, 200);
sp.graphics.lineTo(250, 200);

addChild(sp);

Para desenhar uma curva, basta utilizar curveTo(), que pede um ponto inicial de x, o ponto y, e o ponto de aconragem de x e o de y:

var sp:Sprite = new Sprite();

sp.graphics.lineStyle(1, 0x00FF00, 1);
sp.graphics.curveTo(100, 100, 200, 0);

addChild(sp);