Uso de un sombreado como relleno de dibujo

Cuando se utiliza un sombreado para crear un relleno de dibujo, se emplean los métodos de la API de dibujo para crear una forma vectorial. La salida del sombreado se usa para rellenar la forma, del mismo modo que cualquier imagen de mapa de bits se puede utilizar como relleno de mapa de bits con la API de dibujo. Para crear un relleno de sombreado, en el punto del código en el que desea comenzar a dibujar la forma, llame al método beginShaderFill() del objeto Graphics. Pase el objeto Shader como primer argumento al método beginShaderFill() , tal y como se muestra en este listado:

var canvas:Sprite = new Sprite(); 
canvas.graphics.beginShaderFill(myShader); 
canvas.graphics.drawRect(10, 10, 150, 150); 
canvas.graphics.endFill(); 
// add canvas to the display list to see the result

Cuando se utiliza un sombreado como relleno de dibujo, se establecen todos los valores de la imagen de entrada y los valores de parámetro que requiere el sombreado.

En el siguiente ejemplo se muestra el uso de un sombreado como relleno de dibujo. En este ejemplo, el sombreado crea un degradado de tres puntos. Este degradado tiene tres colores, cada uno de ellos en cada punto de un triángulo, con una mezcla de degradado entre los mismos. Asimismo, los colores giran para crear un efecto de color giratorio animado.

El código de ActionScript se encuentra en tres métodos:

• init() : el método init() se llama cuando se carga la aplicación. En este método, el código establece los valores iniciales para los objetos Point que representan los puntos del triángulo. El código también crea una instancia de Sprite denominada canvas . Posteriormente, en updateShaderFill() , el código dibuja el resultado del sombreado en canvas una vez por fotograma. Finalmente, el código carga el archivo de código de bytes del sombreado.

• onLoadComplete() : en el método onLoadComplete() el código crea el objeto Shader denominado shader . También establece los valores de parámetro iniciales. Finalmente, el código añade el método updateShaderFill() como detector para el evento enterFrame , lo que significa que se llama una vez por fotograma para crear un efecto de animación.

• updateShaderFill() : el método updateShaderFill() se llama una vez en cada fotograma, lo que crea el efecto de animación. En este método, el código calcula y define los valores de los parámetros de sombreado. A continuación el código llama al método beginShaderFill() para crear un relleno de sombreado y llama a otros métodos de la API de dibujo para dibujar el resultado de sombreado en un triángulo.

Este es el código de ActionScript de este ejemplo. Utilice esta clase como clase principal de aplicación para un proyecto solo ActionScript en Flex, o bien, como la clase de documento para el archivo FLA en Flash Professional:

package 
{ 
    import flash.display.Shader; 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.geom.Point; 
    import flash.net.URLLoader; 
    import flash.net.URLLoaderDataFormat; 
    import flash.net.URLRequest; 
     
    public class ThreePointGradient extends Sprite 
    { 
        private var canvas:Sprite; 
        private var shader:Shader; 
        private var loader:URLLoader; 
         
        private var topMiddle:Point; 
        private var bottomLeft:Point; 
        private var bottomRight:Point; 
         
        private var colorAngle:Number = 0.0; 
        private const d120:Number = 120 / 180 * Math.PI; // 120 degrees in radians 
         
         
        public function ThreePointGradient() 
        { 
            init(); 
        } 
         
        private function init():void 
        { 
            canvas = new Sprite(); 
            addChild(canvas); 
             
            var size:int = 400; 
            topMiddle = new Point(size / 2, 10); 
            bottomLeft = new Point(0, size - 10); 
            bottomRight = new Point(size, size - 10); 
             
            loader = new URLLoader(); 
            loader.dataFormat = URLLoaderDataFormat.BINARY; 
            loader.addEventListener(Event.COMPLETE, onLoadComplete); 
            loader.load(new URLRequest("ThreePointGradient.pbj")); 
        } 
         
        private function onLoadComplete(event:Event):void 
        { 
            shader = new Shader(loader.data); 
             
            shader.data.point1.value = [topMiddle.x, topMiddle.y]; 
            shader.data.point2.value = [bottomLeft.x, bottomLeft.y]; 
            shader.data.point3.value = [bottomRight.x, bottomRight.y]; 
             
            addEventListener(Event.ENTER_FRAME, updateShaderFill); 
        } 
         
        private function updateShaderFill(event:Event):void 
        { 
            colorAngle += .06; 
             
            var c1:Number = 1 / 3 + 2 / 3 * Math.cos(colorAngle); 
            var c2:Number = 1 / 3 + 2 / 3 * Math.cos(colorAngle + d120); 
            var c3:Number = 1 / 3 + 2 / 3 * Math.cos(colorAngle - d120); 
             
            shader.data.color1.value = [c1, c2, c3, 1.0]; 
            shader.data.color2.value = [c3, c1, c2, 1.0]; 
            shader.data.color3.value = [c2, c3, c1, 1.0]; 
             
            canvas.graphics.clear(); 
            canvas.graphics.beginShaderFill(shader); 
             
            canvas.graphics.moveTo(topMiddle.x, topMiddle.y); 
            canvas.graphics.lineTo(bottomLeft.x, bottomLeft.y); 
            canvas.graphics.lineTo(bottomRight.x, bottomLeft.y); 
             
            canvas.graphics.endFill(); 
        } 
    } 
}

Este es el código fuente del núcleo del sombreado ThreePointGradient, que se utiliza para crear el archivo de código de bytes “ThreePointGradient.pbj” de Pixel Bender:

<languageVersion : 1.0;> 
kernel ThreePointGradient 
< 
    namespace : "Petri Leskinen::Example"; 
    vendor : "Petri Leskinen"; 
    version : 1; 
    description : "Creates a gradient fill using three specified points and colors."; 
> 
{ 
    parameter float2 point1 // coordinates of the first point 
    < 
        minValue:float2(0, 0); 
        maxValue:float2(4000, 4000); 
        defaultValue:float2(0, 0); 
    >; 
     
    parameter float4 color1 // color at the first point, opaque red by default 
    < 
        defaultValue:float4(1.0, 0.0, 0.0, 1.0); 
    >; 
     
    parameter float2 point2 // coordinates of the second point 
    < 
        minValue:float2(0, 0); 
        maxValue:float2(4000, 4000); 
        defaultValue:float2(0, 500); 
    >; 
     
    parameter float4 color2 // color at the second point, opaque green by default 
    < 
        defaultValue:float4(0.0, 1.0, 0.0, 1.0); 
    >; 
     
    parameter float2 point3 // coordinates of the third point 
    < 
        minValue:float2(0, 0); 
        maxValue:float2(4000, 4000); 
        defaultValue:float2(0, 500); 
    >; 
     
    parameter float4 color3 // color at the third point, opaque blue by default 
    < 
        defaultValue:float4(0.0, 0.0, 1.0, 1.0); 
    >; 
     
    output pixel4 dst; 
     
    void evaluatePixel() 
    { 
        float2 d2 = point2 - point1; 
        float2 d3 = point3 - point1; 
         
        // transformation to a new coordinate system 
        // transforms point 1 to origin, point2 to (1, 0), and point3 to (0, 1) 
        float2x2 mtrx = float2x2(d3.y, -d2.y, -d3.x, d2.x) / (d2.x * d3.y - d3.x * d2.y); 
        float2 pNew = mtrx * (outCoord() - point1); 
         
        // repeat the edge colors on the outside 
        pNew.xy = clamp(pNew.xy, 0.0, 1.0); // set the range to 0.0 ... 1.0 
         
        // interpolating the output color or alpha value 
        dst = mix(mix(color1, color2, pNew.x), color3, pNew.y); 
    } 
}

Para obtener más información sobre el dibujo de formas utilizando la API de dibujo, consulte Uso de la API de dibujo .

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.