Verwenden eines Shaders als Füllmuster für Zeichnungen

Wenn Sie eine Zeichnungsfüllung mit einem Shader erstellen, verwenden Sie die Zeichnungs-API-Methoden, um eine Vektorform zu erzeugen. Die Ausgabe des Shaders wird verwendet, um die Form zu füllen, so wie jedes Bitmap-Bild mit der Zeichnungs-API als Bitmap-Füllung verwendet werden kann. Um eine Shader-Füllung zu erzeugen, rufen Sie an dem Punkt in Ihrem Code, an dem Sie mit dem Zeichnen der Form beginnen möchten, die beginShaderFill() -Methode des Graphics-Objekts auf. Übergeben Sie das Shader-Objekt wie in diesem Beispiel dargestellt als erstes Argument an die beginShaderFill() -Methode:

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

Wenn Sie einen Shader als Zeichnungsfüllung verwenden, können Sie die vom Shader benötigten Eingabebild- und Parameterwerte beliebig setzen.

Im folgenden Beispiel wird gezeigt, wie ein Shader als Zeichnungsfüllung verwendet wird. In diesem Beispiel erstellt der Shader einen Drei-Punkte-Verlauf. Dieser Verlauf enthält drei Farben, jede an der Spitze eines Dreiecks, die zur Mitte hin ineinander übergehen. Zusätzlich drehen sich die Farben, um einen horizontalen Farbdreheffekt zu erzeugen.

Der ActionScript-Code befindet sich in drei Methoden:

• init() : Die init() -Methode wird beim Laden der Anwendung aufgerufen. In dieser Methode setzt der Code die Anfangswerte für die Point-Objekte, die die Spitzen des Dreiecks bilden. Zudem erstellt der Code eine Sprite-Instanz mit dem Namen canvas . Später zeichnet der Code in updateShaderFill() das Shader-Ergebnis einmal pro Bild in canvas . Schließlich lädt der Code die Shader-Bytecodedatei.

• onLoadComplete() : In der onLoadComplete() -Methode erstellt der Code das Shader-Objekt mit dem Namen shader . Er setzt außerdem die Anfangswerte der Parameter. Schließlich fügt der Code die updateShaderFill() -Methode als Listener für das Ereignis enterFrame hinzu, sie wird also pro Bild einmal aufgerufen, um einen Animationseffekt zu erzielen.

• updateShaderFill() : Die updateShaderFill() -Methode wird pro Bild einmal aufgerufen und erzeugt so einen Animationseffekt. In dieser Methode berechnet und setzt der Code die Parameterwerte des Shaders. Der Code ruft dann die beginShaderFill() -Methode auf, um eine Shader-Füllung zu erzeugen, und ruft andere Zeichnungs-API-Methoden auf, um das Shader-Ergebnis in ein Dreieck zu zeichnen.

Im Folgenden wird der ActionScript-Code für dieses Beispiel angezeigt. Verwenden Sie diese Klasse als Hauptanwendungsklasse für ausschließlich in ActionScript erstellte Projekte in Flash Builder oder als Dokumentklasse für eine FLA-Datei 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(); 
        } 
    } 
}

Im Folgenden ist der Quellcode für den Kernel des ThreePointGradient-Shaders dargestellt, der zum Erstellen der Pixel Bender-Bytecodedatei „ThreePointGradient.pbj“ verwendet wurde:

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

Weitere Informationen zum Zeichnen von Formen mit der Zeichnungs-API finden Sie unter Verwenden der Zeichnungs-API .

Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.