Użycie modułu cieniującego jako wypełnienia

Jeśli moduł cieniujący jest używany w celu utworzenia wypełnienia, należy korzystać z metod interfejsu API rysowania w celu utworzenia kształtu wektorowego. Wynik działania modułu cieniującego jest używany do wypełnienia kształtu w taki sam sposób, w jaki dowolna bitmapa może zostać wykorzystana jako wypełnienie w API rysowania. W celu utworzenia wypełnienia cieniowanego w punkcie kodu, w którym rozpocznie się rysowanie kształtu, należy wywołać metodę beginShaderFill() obiektu Graphics. Obiekt Shader należy przekazać jako pierwszy argument do metody beginShaderFill() , co przedstawia poniższy kod.

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

Jeśli moduł cieniujący jest używany jako wypełnienie, należy ustawić wartości obrazu wejściowego i wartości parametrów, które są wymagane przez ten moduł cieniujący.

Poniższy przykład prezentuje używanie modułu cieniującego wypełnienia: W tym przykładzie moduł cieniujący tworzy gradient trzypunktowy. Gradient zawiera trzy kolory, a każdy z nich znajduje się na rogu trójkąta — w środku kolory są mieszane. Ponadto kolory obracają się w celu utworzenia animowanego efektu obracających się kolorów.

Kod ActionScript jest zawarty w trzech metodach:

• init() : Metoda init() jest wywoływana podczas wczytywania aplikacji. W tej metodzie kod ustawia początkowe wartości dla obiektów Point, które reprezentują punkty trójkąta. Kod tworzy również wystąpienie klasy Sprite o nazwie canvas . Następnie w metodzie updateShaderFill() kod rysuje wynik działania modułu cieniującego na obiekcie canvas jeden raz na klatkę. Na koniec kod wczytuje plik kodu bajtowego modułu cieniującego.

• onLoadComplete() : W metodzie onLoadComplete() kod tworzy obiekt Shader o nazwie shader . Ustawia również początkowe wartości parametrów. Na koniec kod dodaje metodę updateShaderFill() jako detektor zdarzenia enterFrame , co oznacza, że jest ona wywoływana jeden raz na klatkę w celu utworzenia efektu animacji.

• updateShaderFill() : Metoda updateShaderFill() jest wywoływana raz na klatkę w celu utworzenia efektu animacji. W tej metodzie kod oblicza i ustawia wartości parametrów modułu cieniującego. Kod następnie wywołuje metodę beginShaderFill() w celu utworzenia wypełnienia i wywołuje inne metody interfejsu API rysowania w celu narysowania efektu działania modułu cieniującego w trójkącie.

Oto kod tego przykładu w języku ActionScript. Ta aplikacja może być używana jako główna klasa aplikacji dla projektu zawierającego tylko kod ActionScript w programie Flash Builder lub jako klasa document dla pliku FLA w programie 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(); 
        } 
    } 
}

Następujący kod źródłowy definiuje jądro modułu cieniującego ThreePointGradient, który jest używany w celu utworzenia pliku kodu bajtowego „ThreePointGradient.pbj” modułu 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); 
    } 
}

Więcej informacji na temat rysowania kształtów za pomocą interfejsu API rysowania zawiera sekcja Korzystanie z interfejsu API rysowania .

Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.