Dibujo de líneas y curvas

Para dibujar con la propiedad graphics de una instancia de Shape, Sprite o MovieClip, en primer lugar es necesario definir el estilo (tamaño y color de línea, color de relleno) que se utilizará al dibujar. Al igual que cuando se utilizan las herramientas de dibujo de Adobe® Flash® Professional u otra aplicación de dibujo, al utilizar ActionScript se puede dibujar con o sin trazo y con o sin color de relleno. La apariencia del trazo se especifica mediante los métodos lineStyle() o lineGradientStyle() . Para crear una línea sólida se emplea el método lineStyle() . Al llamar a este método, los valores más comunes que se especificarán son los primeros tres parámetros: grosor de línea, color y alfa. Por ejemplo, la siguiente línea de código indica al objeto Shape llamado myShape que dibuje líneas de 2 píxeles de grosor, de color rojo (0x990000) y de una opacidad del 75%:

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

El valor predeterminado del parámetro alfa es de 1,0 (100%), de modo que se puede omitir el parámetro si se desea una línea completamente opaca. El método lineStyle() también acepta dos parámetros más para las sugerencias de píxeles y el modo de escala. Para obtener más información sobre el uso de estos parámetros, consulte la descripción del método Graphics.lineStyle() en Referencia de ActionScript 3.0 para la plataforma de Adobe Flash .

Para crear una línea con gradiente se emplea el método lineGradientStyle() . Este método se describe en Creación de líneas y rellenos degradados .

Para crear una forma con relleno es necesario llamar a los métodos beginFill() , beginGradientFill() , beginBitmapFill() o beginShaderFill() antes de empezar a dibujar. El más básico de ellos, el método beginFill() , acepta dos parámetros: el color de relleno y (opcionalmente) un valor de alfa para el color de relleno. Por ejemplo, para dibujar una forma con un relleno verde sólido, se puede usar el siguiente código (suponiendo que se vaya a dibujar un objeto llamado myShape ):

myShape.graphics.beginFill(0x00FF00);

Llamar a cualquier método de relleno termina de forma implícita cualquier relleno antes de iniciar uno nuevo. Llamar a cualquier método que especifique un estilo de trazo sustituye al trazo anterior, pero no modifica el relleno especificado previamente (y viceversa).

Una vez indicado el estilo de línea y las propiedades de relleno, el siguiente paso es especificar el punto de inicio del dibujo. La instancia de Graphics tiene un punto de dibujo, como la punta de un lápiz sobre la superficie de un papel. La siguiente acción de dibujo empezará allá donde se encuentre el punto de dibujo. Inicialmente, los objetos Graphics tienen su punto de dibujo en el punto 0,0 del espacio de coordenadas del objeto en el que se está dibujando. Para empezar a dibujar en un punto diferente es necesario llamar primero al método moveTo() antes de llamar a cualquiera de los métodos de dibujo. Esto es análogo a levantar la punta del lápiz del papel y moverla a una nueva posición.

Una vez que el punto de dibujo está colocado en su lugar, se empieza a dibujar utilizando una serie de llamadas a los métodos de dibujo lineTo() (para dibujar líneas rectas) y curveTo() (para dibujar curvas).

Durante el dibujo, si se ha especificado un color de relleno, es posible cerrar el relleno llamando al método endFill() . Si no se ha dibujado una forma cerrada (dicho de otro modo, si en el momento en que se llama a endFill() el punto de dibujo no se encuentra en el punto de inicio de la forma), al llamar al método endFill() , el motor de ejecución de Flash cerrará automáticamente la forma dibujando una línea recta desde el punto de dibujo actual hasta la ubicación especificada en la llamada a moveTo() más reciente. Si se ha iniciado un relleno y no se ha llamado a endFill() , al llamar a beginFill() (o a cualquier otro método de relleno) se cerrará el relleno actual y se iniciará uno nuevo.

Al llamar al método lineTo() , el objeto Graphics dibuja una línea recta desde el punto de dibujo actual hasta las coordenadas especificadas en los dos parámetros de la llamada al método usando el estilo de línea que se haya indicado. Por ejemplo, la siguiente línea de código coloca el punto de dibujo en las coordenadas 100, 100 y, a continuación, dibuja una línea hasta el punto 200, 200:

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

El siguiente ejemplo dibuja triángulos de color rojo y verde con una altura de 100 píxeles:

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);

El método curveTo() dibuja una curva cuadrática de Bézier, es decir, un arco que conecta dos puntos (llamados puntos de ancla) y se inclina hacia un tercero (llamado punto de control). El objeto Graphics utiliza la posición de dibujo actual como primer punto de ancla. Al llamar al método curveTo() , se pasan cuatro parámetros: las coordenadas x e y, seguidas por las coordenadas x e y del segundo punto de ancla. Por ejemplo, el siguiente código dibuja una curva que empieza en el punto 100, 100 y termina en el punto 200, 200. Dado que el punto de control se encuentra en 175, 125, la curva que se genera se mueve hacia la derecha y luego hacia abajo:

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

El siguiente ejemplo dibuja objetos circulares rojos y verdes con una altura y una anchura de 100 píxeles. Hay que tener en cuenta que, debido a la naturaleza de la ecuación cuadrática de Bézier, no son círculos perfectos:

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);