Använda en skuggning som teckningsfyllning

När du lägger till en skuggning för att skapa en ritfyllning, skapar du en vektorform med drawing API-metoderna (teckningsgränssnittet). Skuggningens utdata används för att fylla formen, på samma sätt som en bitmappsbild kan användas som bitmappsfyllning med drawing API (teckningsgränssnittet). Om du vill skapa en skuggningsfyllning anropar du Graphics-objektets beginShaderFill() -metod vid den punkt i koden där du vill börja rita formen. Skicka Shader-objektet som det första argumentet till metoden beginShaderFill() , så som visas i exemplet:

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

När du använder en skuggning som ritfyllning, ska du ställa in alla indatabildvärden och parametervärden som krävs för skuggningen.

I exemplet nedan visas hur du använder en skuggning som ritfyllning. I det här exemplet skapar skuggningen en övertoning med tre punkter. Övertoningen har tre färger, en vid vart och ett av triangelhörnen, med en övertoningsblandning mellan dem. Färgerna roterar dessutom för att skapa en animerad snurrande färgeffekt.

ActionScript-koden finns i tre metoder:

• init() : Metoden init() anropas när programmet läses in. I den här metoden anger koden startvärdena för Point-objekten som representerar hörnen i triangeln. Koden skapar också en Sprite-instans med namnet canvas . I metoden updateShaderFill() ritar koden sedan skuggningsresultatet i canvas en gång per bildruta. Koden läser slutligen in skuggningens bytekodfil.

• onLoadComplete() : I metoden onLoadComplete() skapar koden Shader-objektet med namnet shader . Den ställer också in startparametervärden. Koden lägger slutligen till metoden updateShaderFill() som avlyssnare för händelsen enterFrame , vilket innebär att den anropas en gång per bildruta för att skapa en animeringseffekt.

• updateShaderFill() : Metoden updateShaderFill() anropas en gång per bildruta, vilket skapar animeringseffekten. I den här metoden beräknar koden skuggningsparameterns värden och ställer in dem. Koden anropar sedan metoden beginShaderFill() för att skapa en skuggningsfyllning och anropar andra ritnings-API-metoder för att rita skuggningsresultatet i en triangel.

Nedan finns ActionScript-koden för det här exemplet. Använd den här klassen som huvudprogramklass för ett ActionScript-projekt i Flash Builder, eller som dokumentklass för en FLA-fil i 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(); 
        } 
    } 
}

Nedan finns källkoden för ThreePointGradient-skuggningskärnan, som används för att skapa Pixel Bender-bytekodfilen, ”ThreePointGradient.pbj”:

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

Mer information om hur du ritar skuggningar med hjälp av drawing API (teckningsgränssnittet) finns i Använda Drawing API (teckningsgränssnittet) .

Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.