Desenho de linhas e curvas

Para desenhar com a propriedade graphics de uma ocorrência de Shape, Sprite ou MovieClip, defina primeiro o estilo (tamanho e cor da linha, cor do preenchimento) a ser usado no desenho. Da mesma forma como acontece quando você usa as ferramentas de desenho do Adobe® Flash® Professional ou outro aplicativo de desenho, ao usar o ActionScript para desenhar, você pode desenhar com ou sem traçado e com ou sem uma cor de preenchimento. Você especifica a aparência do traçado utilizando o método lineStyle() ou lineGradientStyle() . Para criar uma linha sólida, use o método lineStyle() . Quando você chamar esse método, os valores mais comuns que você especificará serão os três primeiros parâmetros: espessura da linha, cor e alfa. Por exemplo, essa linha de código instrui Shape chamada myShape a desenhar linhas com espessura de 2 pixels, vermelhas (0x990000) e 75% opacas:

myShape.graphics.lineStyle(2, 0x990000, .75);

O valor padrão para o parâmetro alpha é 1.0 (100%), então você pode deixá-lo desativado, se quiser uma linha totalmente opaca. O método lineStyle() também aceita dois parâmetros adicionais para dica de pixel e modo de escala. Para obter mais informações sobre o uso desses parâmetros, consulte a descrição do método Graphics.lineStyle() na Referência do ActionScript® 3.0 para Adobe® Flash® Platform .

Para criar uma linha gradiente, use o método lineGradientStyle() . Esse método é descrito em Criação de linhas e preenchimentos gradientes .

Se você quiser criar uma forma preenchida, chame os métodos beginFill() , beginGradientFill() , beginBitmapFill() ou beginShaderFill() antes de iniciar o desenho. O mais básico deles, o método beginFill() , aceita dois parâmetros: a cor de preenchimento e (opcionalmente) um valor alfa para a cor de preenchimento. Por exemplo, se você quiser desenhar uma forma com um preenchimento verde sólido, utilize o seguinte código (considerando que está desenhando em um objeto chamado myShape ):

myShape.graphics.beginFill(0x00FF00);

Chamar qualquer método de preenchimento implicitamente encerra qualquer preenchimento anterior antes de iniciar um novo. Chamar qualquer método que especifique um estilo de traçado substitui o traçado anterior, mas não altera o preenchimento especificado anteriormente e vice-versa.

Depois de especificar as propriedades style e fill da linha, a próxima etapa é indicar o ponto de início para o desenho. A ocorrência Graphics tem um ponto de desenho, como a ponta de uma caneta em um pedaço de papel. Sempre que o ponto de desenho for localizado, esse será o local em que a próxima ação de desenho será iniciada. Inicialmente um objeto Graphics começa com seu ponto de desenho no ponto 0, 0 no espaço de coordenadas do objeto em que está o desenho. Para iniciar o desenho em um ponto diferente, você pode primeiro chamar o método moveTo() antes de chamar um dos métodos de desenho. Isso é semelhante a tirar do papel a ponta da caneta e movê-la para uma nova posição.

Com o ponto de desenho no local, desenhe usando uma série de chamadas de métodos de desenho lineTo() (para linhas retas) e curveTo() (para linhas curvas).

Ao desenhar, se você tiver especificado uma cor de preenchimento, feche o preenchimento chamando o método endFill() . Se você não desenhou uma forma fechada (em outras palavras, se no momento em que você chama endFill() , o ponto de desenho não está no ponto inicial da forma), quando chamar o método endFill() , o tempo de execução do Flash fecha automaticamente a forma desenhando uma linha reta do ponto de desenho atual até o local especificado na chamada mais recente de moveTo() . Se você iniciou um preenchimento e não chamou endFill() , chamar beginFill() (ou qualquer um dos outros métodos de preenchimento) fecha o preenchimento atual e inicia um novo.

Quando você chama o método lineTo() , o objeto Graphics desenha uma linha reta do ponto de desenho atual até as coordenadas especificadas como os dois parâmetros na chamada do método, com o estilo de linha também especificado. Por exemplo, essa linha de código coloca o ponto de desenho no ponto 100, 100 e desenha uma linha até o ponto 200, 200:

myShape.graphics.moveTo(100, 100); 
myShape.graphics.lineTo(200, 200);

O exemplo a seguir desenha triângulos vermelho e verde com uma altura de 100 pixels:

var triangleHeight:uint = 100; 
var triangle:Shape = new Shape(); 
 
// red triangle, starting at point 0, 0 
triangle.graphics.beginFill(0xFF0000); 
triangle.graphics.moveTo(triangleHeight / 2, 0); 
triangle.graphics.lineTo(triangleHeight, triangleHeight); 
triangle.graphics.lineTo(0, triangleHeight); 
triangle.graphics.lineTo(triangleHeight / 2, 0); 
 
// green triangle, starting at point 200, 0 
triangle.graphics.beginFill(0x00FF00); 
triangle.graphics.moveTo(200 + triangleHeight / 2, 0); 
triangle.graphics.lineTo(200 + triangleHeight, triangleHeight); 
triangle.graphics.lineTo(200, triangleHeight); 
triangle.graphics.lineTo(200 + triangleHeight / 2, 0); 
 
this.addChild(triangle);

O método curveTo() desenha uma curva Bézier quadrática. Isso desenha um arco que conecta dois pontos (chamados pontos de ancoragem, enquanto se curva a um terceiro ponto (chamado ponto de controle). O objeto Graphics usa a posição atual do desenho como o primeiro ponto de ancoragem. Quando você chama o método curveTo() , passa quatro parâmetros: as coordenadas x e y do ponto de controle, seguido pelas coordenadas x e y do segundo ponto de ancoragem. Por exemplo, o seguinte código desenha uma curva começando no ponto 100, 100 e terminando no ponto 200, 200. Como o ponto de controle está no ponto 175, 125, isso cria uma curva que se move para a direita e para baixo:

myShape.graphics.moveTo(100, 100); 
myShape.graphics.curveTo(175, 125, 200, 200);

O exemplo a seguir desenha objetos circulares vermelho e verde com uma largura e altura de 100 pixels. Observe que, devido à natureza da equação de Bézier de segundo grau, esses círculos não são perfeitos.

var size:uint = 100; 
var roundObject:Shape = new Shape(); 
 
// red circular shape 
roundObject.graphics.beginFill(0xFF0000); 
roundObject.graphics.moveTo(size / 2, 0); 
roundObject.graphics.curveTo(size, 0, size, size / 2); 
roundObject.graphics.curveTo(size, size, size / 2, size); 
roundObject.graphics.curveTo(0, size, 0, size / 2); 
roundObject.graphics.curveTo(0, 0, size / 2, 0); 
 
// green circular shape 
roundObject.graphics.beginFill(0x00FF00); 
roundObject.graphics.moveTo(200 + size / 2, 0); 
roundObject.graphics.curveTo(200 + size, 0, 200 + size, size / 2); 
roundObject.graphics.curveTo(200 + size, size, 200 + size / 2, size); 
roundObject.graphics.curveTo(200, size, 200, size / 2); 
roundObject.graphics.curveTo(200, 0, 200 + size / 2, 0); 
 
this.addChild(roundObject);