Gölgelendiriciyi çizim dolgusu olarak kullanma

Çizim dolgusu oluşturmak için bir gölgelendirici kullandığınızda, vektör şekli oluşturmak için çizim api'si yöntemlerini kullanırsınız. Herhangi bir bitmap görüntüsünün, çizim api'si ile bitmap dolgusu olarak kullanılabilmesinde olduğu gibi, şekli doldurmak için gölgelendiricinin çıktısı kullanılır. Gölgelendirici dolgusu oluşturmak için, kodunuzda şekli çizmeye başlamak istediğiniz noktada, Graphics nesnesinin beginShaderFill() yöntemini çağırın. Bu listede gösterildiği gibi, beginShaderFill() yöntemine birinci argüman olarak Shader nesnesini iletin:

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

Bir gölgelendiriciyi çizim dolgusu olarak kullandığınızda, gölgelendiricinin gerektirdiği herhangi bir girdi görüntüsü değerini ve parametre değerini ayarlarsınız.

Şu örnek, gölgelendiricinin çizim dolgusu olarak kullanılmasını göstermektedir. Bu örnekte gölgelendirici üç noktalı degrade oluşturur. Bu degrade, renklerin her biri üçgenin bir ucunda ve aralarında degrade olacak şekilde üç renk içerir. Ayrıca, renkler animasyon uygulanmış dönen renk efekti oluşturmak için döner.

ActionScript kodu üç moddadır:

• init() : Uygulama yüklendiğinde init() yöntemi çağrılır. Bu yöntemde kod, üçgenin noktalarını temsil eden Point nesnelerinin başlangıç değerlerini ayarlar. Ayrıca, kod canvas adında bir Sprite örneği oluşturur. Daha sonra updateShaderFill() yönteminde kod her kare için bir defa gölgelendirici sonucunu canvas öğesine çizer. Son olarak kod, gölgelendirici bayt kodu dosyasını yükler.

• onLoadComplete() : onLoadComplete() yönteminde kod, shader adında bir Shader nesnesi oluşturur. Ayrıca başlangıç parametre değerlerini ayarlar. Son olarak kod, enterFrame olayının dinleyicisi olarak updateShaderFill() yöntemini ekler, bu animasyon efekti oluşturmak için her kare için bir defa bu yöntemi çağırdığı anlamına gelir.

• updateShaderFill() : Her kare için birer kere updateShaderFill() yöntemi çağrılarak animasyon efekti oluşturulur. Bu yöntemde kod, gölgelendirici parametrelerinin değerlerini hesaplar ve ayarlar. Daha sonra kod, gölgelendirici dolgusu oluşturmak için beginShaderFill() yöntemini çağırır ve gölgelendirici sonucunu bir üçgende çizmek için başka çizim api'si yöntemlerini çağırır.

Aşağıda, bu örneğin ActionScript kodu verilmiştir. Flex'te yalnızca ActionScript projesi için ana uygulama sınıfı olarak veya Flash geliştirme aracındaki bir FLA dosyasının belge sınıfı olarak bu sınıfı kullanın:

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

Aşağıda, “ThreePointGradient.pbj” Pixel Bender bayt kodu dosyasını oluşturmak için kullanılan, ThreePointGradient gölgelendirici çekirdeğinin kaynak kodu verilmiştir:

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

Çizim api'sini kullanarak şekil çizme hakkında daha fazla bilgi için, bkz. Çizim API'sini kullanma .

Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.