Creación de líneas y rellenos degradados

Flash Player 9 y posterior, Adobe AIR 1.0 y posterior

El objeto graphics también puede dibujar trazos y rellenos con degradados en lugar de con colores sólidos. Los trazos con degradado se crean mediante el método lineGradientStyle() , mientras que para los rellenos degradados se usa el método beginGradientFill() .

Ambos métodos aceptan los mismos parámetros. Los cuatro primeros son necesarios: tipo, colores, alfas y proporciones. Los cuatro restantes son opcionales, pero resultan útiles para llevar a cabo una personalización avanzada.

  • El primer parámetro especifica el tipo de degradado que se va a crear. Los valores aceptables son GradientType.LINEAR o GradientType.RADIAL .

  • El segundo parámetro especifica el conjunto de valores de color que se usará. En un degradado lineal, los colores se ordenarán de izquierda a derecha. En un degradado radial, se organizarán de dentro a fuera. El orden de los colores del conjunto representa el orden en el que los colores se dibujarán en el degradado.

  • El tercer parámetro especifica los valores de transparencia alfa de los colores correspondientes al parámetro anterior.

  • El cuarto parámetro especifica las proporciones, o el énfasis que cada color tiene dentro del gradiente. Los valores válidos se encuentran entre 0 y 255. Estos valores no representan una altura o anchura, sino una posición dentro del degradado; 0 representa el inicio del degradado y 255 el final. El conjunto de proporciones debe aumentar secuencialmente y tener el mismo número de entradas que los conjuntos de color y de alfa especificados en el segundo y tercer parámetros.

Si bien el quinto parámetro, la matriz de transformación, es opcional, se suele utilizar con frecuencia, ya que constituye una forma fácil y potente de controlar la apariencia del degradado. Este parámetro acepta una instancia de Matrix. La forma más sencilla de crear un objeto Matrix para el degradado es usar el método createGradientBox() de la clase Matrix.

Definición de un objeto Matrix para su utilización con un degradado

Los métodos beginGradientFill() y lineGradientStyle() de la clase flash.display.Graphics se utilizan para definir los degradados que se utilizarán en las formas. Cuando se define un degradado, se proporciona una matriz como uno de los parámetros de estos métodos.

La forma más fácil de definir la matriz consiste en utilizar el método createGradientBox() de la clase Matrix, que crea una matriz que se usa para definir el degradado. La escala, la rotación y la posición del degradado se definen con los parámetros que se pasan al método createGradientBox() . El método createGradientBox() acepta los siguientes parámetros:

  • Anchura del cuadro del degradado: la anchura (en píxeles) en que se extenderá el degradado

  • Altura del cuadro del degradado: la altura (en píxeles) sobre la que se extenderá el degradado

  • Rotación del cuadro de degradado: la rotación (en radianes) que se aplicará al degradado

  • Traslación horizontal: el desplazamiento horizontal (en píxeles) que se aplicará al degradado

  • Traslación vertical: el desplazamiento vertical (en píxeles) que se aplicará al degradado

Por ejemplo, en el caso de un degradado con las características siguientes:

  • GradientType.LINEAR

  • Dos colores, verde y azul, con el conjunto ratios establecido en [0, 255]

  • SpreadMethod.PAD

  • InterpolationMethod.LINEAR_RGB

En los ejemplos siguientes, se muestran los degradados en los que el parámetro rotation del método createGradientBox() difiere del modo indicado, pero el resto de valores no cambia:

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;

En el ejemplo siguiente se muestran los efectos sobre un degradado lineal de verde a azul, en el que los parámetros rotation , tx y ty del método createGradientBox() difieren del modo indicado, pero el resto de valores no cambia:

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;

Los parámetros width , height , tx y ty del método createGradientBox() también afectan al tamaño y la posición de un relleno con degradado radial , tal como se muestra en el ejemplo siguiente:

width = 50;

height = 100;

rotation = 0;

tx = 25;

ty = 0;

En el siguiente código se muestra el último degradado 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);

No hay que olvidar que la anchura y altura del relleno degradado vienen dadas por la anchura y la altura de la matriz de degradado en lugar de por la anchura o la altura dibujadas usando el objeto Graphics. Al dibujar con el objeto Graphics, se dibuja lo que existe en esas coordenadas en la matriz de degradado. Incluso si se usa uno de los métodos de forma de un objeto Graphics, como drawRect() , el degradado no se estira hasta adaptarse al tamaño de la forma dibujada, sino que el tamaño del degradado debe especificarse en la propia matriz de degradado.

El siguiente ejemplo ilustra la diferencia visual entre las dimensiones de la matriz de degradado y las dimensiones del dibujo: 

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

Este código dibuja tres degradados con el mismo estilo de relleno especificado una distribución idéntica de rojo, verde y azul. Los degradados se dibujan utilizando el método drawRect() con anchuras de 50, 100 y 150 píxeles respectivamente. La matriz de degradado especificada en el método beginGradientFill() se crea con una anchura de 100 píxeles. Esto quiere decir que el primer degradado abarcará solo la mitad del espectro del degradado, el segundo lo englobará totalmente y el tercero lo incluirá por completo y además tendrá 50 píxeles más de azul extendiéndose hacia la derecha.

El método lineGradientStyle() funciona de forma similar a beginGradientFill() excepto en que, además de definir el degradado, es necesario especificar el grosor del trazo utilizando el método lineStyle() antes de dibujar. El siguiente código dibuja un cuadrado con un trazo degradado rojo, verde y 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 más información sobre la clase Matrix, consulte Uso de objetos Matrix .