Een arcering gebruiken als een vulling bij het tekenen

Als u een arcering gebruikt om een vulling te maken bij het tekenen, gebruikt u de methoden van de API voor tekenen om een vectorvorm te maken. De uitvoer van de arcering wordt gebruikt om de vorm te vullen, op dezelfde manier dat een bitmapafbeelding kan worden gebruikt als bitmapvulling met de API voor tekenen. U maakt een vulling met arcering door op het punt in de code waar u wilt beginnen met het tekenen van de vorm, de methode beginShaderFill() van het Graphics-object op te roepen. Geef het Shader-object als het eerste argument door aan de methode beginShaderFill(), zoals in het codevoorbeeld wordt geïllustreerd:

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

Als u een arcering gebruikt als vulling bij het tekenen, stelt u alle waarden voor de invoerafbeelding en parameters in die de arcering nodig heeft.

In het volgende voorbeeld ziet u hoe u een arcering gebruikt als vulling bij het tekenen. In dit voorbeeld maakt de arcering een verloop met drie punten. Het verloop heeft drie kleuren, elk op het punt van een driehoek, met een overvloeiing ertussen. Daarnaast draaien de kleuren om een bewegend effect van draaiende kleuren te creëren.

De ActionScript-code heeft drie methoden:

• init(): de methode init() wordt aangeroepen wanneer de toepassing wordt geladen. In deze methode stelt de code de beginwaarden in voor de Point-objecten die de punten van de driehoek weergeven. De code maakt ook de nieuwe Sprite-instantie canvas. Later, in de methode updateShaderFill(), tekent de code het resultaat van de arcering één keer per frame in canvas. Tot slot laadt de code het bytecodebestand voor de arcering.

• onLoadComplete(): in de methode onLoadComplete() maakt de code het Shader-object shader. De code stelt ook de beginwaarden van de parameters in. Tot slot voegt de code de methode updateShaderFill() toe als listener voor de gebeurtenis enterFrame. De methode wordt dan één keer per frame aangeroepen om een animatie-effect te maken.

• updateShaderFill(): de methode updateShaderFill() wordt één keer per frame aangeroepen om het animatie-effect te maken. In deze methode worden de parameterwaarden voor de arcering berekend en ingesteld. De code roept vervolgens de methode beginShaderFill() aan om een vulling met arcering te maken en roept andere methoden van de API voor tekenen aan om het resultaat van de arcering te tekenen in een driehoek.

Hier volgt de ActionScript-code voor dit voorbeeld. Gebruik deze klasse als de hoofdtoepassingsklasse voor een alleen-ActionScript-project in Flash Builder of als de documentklasse voor het FLA-bestand in 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(); 
        } 
    } 
}

Hier volgt de broncode voor de ThreePointGradient-arceringskernel die wordt gebruikt om het Pixel Bender-bytecodebestand ThreePointGradient.pbj te maken:

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

Zie De teken-API gebruiken voor meer informatie over het tekenen van vormen met de API voor tekenen.