Degrade çizgiler ve dolgular oluşturma

Flash Player 9 ve üstü, Adobe AIR 1.0 ve üstü

Grafik nesnesi, düz renkler yerine degradeler içeren kontur ve dolgular da çizebilir. Degrade kontur, lineGradientStyle() yöntemiyle ve degrade dolgu da beginGradientFill() yöntemiyle oluşturulur.

Her iki yöntem de aynı parametreleri kabul eder. Bunların ilk dördü zorunludur: tür, renkler, alfalar ve oranlar. Kalan dördü ise isteğe bağlı olup ileri düzey özelleştirmelerde kullanışlıdır.

  • Birinci parametre, oluşturduğunuz degrade türünü belirtir. Kabul edilebilir değerler GradientType.LINEAR veya GradientType.RADIAL değeridir.

  • İkinci parametre, kullanılacak renk değerlerinin dizisini belirtir. Doğrusal degradede, renkler soldan sağa ayarlanır. Radyal degradede, renkler içten dışa ayarlanır. Renklerin dizideki sırası, renklerin degradede çizileceği sırayı temsil eder.

  • Üçüncü parametre, önceki parametrede karşılık gelen renklerin alfa saydamlığı değerlerini belirtir.

  • Dördüncü parametre, oranları veya her rengin degradede ne kadar vurguya sahip olduğunu belirtir. Kabul edilebilir değerler 0-255 arasındadır. Bu değerler herhangi bir genişlik veya yüksekliği değil, degrade içindeki konumu temsil eder; 0, degradenin başını temsil ederken, 255 de degradenin sonunu temsil eder. Oranlar dizisi sırayla artmalı ve ikinci ve üçüncü parametrelerde belirtilen renk ve alfa dizileriyle aynı sayıda girişe sahip olmalıdır.

Beşinci parametre olan dönüştürme matrisi isteğe bağlı olsa da, degradenin görünümünü denetlemeye yönelik kolay ve güçlü bir yöntem sağladığından yaygın olarak kullanılır. Bu parametre bir Matrix örneğini kabul eder. Degrade için bir Matrix nesnesi oluşturmanın en kolay yolu, Matrix sınıfının createGradientBox() yönteminin kullanılmasıdır.

Degradeyle kullanılacak bir Matrix nesnesini tanımlama

Şekillerde kullanılacak degradeleri tanımlamak için flash.display.Graphics sınıfının beginGradientFill() ve lineGradientStyle() yöntemlerini kullanırsınız. Bir degrade tanımladığınızda, bu yöntemlerin parametrelerinden biri olarak bir matris sağlarsınız.

Matrisi tanımlamanın en kolay yolu, degradeyi tanımlamak için kullanılacak bir matris oluşturan Matrix sınıfının createGradientBox() yönteminin kullanılmasıdır. createGradientBox() yöntemine iletilen parametreleri kullanarak degradenin ölçeğini, dönüşünü ve konumunu tanımlarsınız. createGradientBox() yöntemi şu parametreleri kabul eder:

  • Degrade kutusu genişliği: degradenin yayılacağı genişlik (piksel cinsinden)

  • Degrade kutusu yüksekliği: degradenin yayılacağı yükseklik (piksel cinsinden)

  • Degrade kutusu dönüşü: degradeye uygulanacak dönüş (radyan olarak)

  • Yatay çevirme: degradenin yatay olarak kaydırılacağı uzaklık (piksel cinsinden)

  • Dikey çevirme: degradenin dikey olarak kaydırılacağı uzaklık (piksel cinsinden)

Örneğin, aşağıdaki özelliklere sahip bir degrade olduğunu varsayın:

  • GradientType.LINEAR

  • ratios dizisi [0, 255] olarak ayarlanmış yeşil ve mavi olmak üzere iki renk

  • SpreadMethod.PAD

  • InterpolationMethod.LINEAR_RGB

Aşağıdaki örnekler, createGradientBox() yönteminin rotation parametresinin, belirtildiği şekilde farklılık gösterdiği ancak diğer tüm ayarların aynı kaldığı degradeleri gösterir:

width = 100;

height = 100;

rotation = 0;

tx = 0;

ty = 0;

width = 100;

height = 100;

rotation = Math.PI/4; // 45°

tx = 0;

ty = 0;

width = 100;

height = 100;

rotation = Math.PI/2; // 90°

tx = 0;

ty = 0;

Aşağıdaki örnekler, createGradientBox() yönteminin rotation, tx ve ty parametrelerinin, belirtildiği şekilde farklılık gösterdiği ancak diğer tüm ayarların aynı kaldığı yeşilden maviye doğrusal degradedeki efektleri gösterir:

width = 50;

height = 100;

rotation = 0;

tx = 0;

ty = 0;

width = 50;

height = 100;

rotation = 0

tx = 50;

ty = 0;

width = 100;

height = 50;

rotation = Math.PI/2; // 90°

tx = 0;

ty = 0;

width = 100;

height = 50;

rotation = Math.PI/2; // 90°

tx = 0;

ty = 50;

createGradientBox() yönteminin width, height, tx ve ty parametreleri, aşağıdaki örnekte gösterildiği gibi, radyal degrade dolgunun boyutunu ve konumunu da etkiler:

width = 50;

height = 100;

rotation = 0;

tx = 25;

ty = 0;

Aşağıdaki kod, gösterilen son radyal degradeyi oluşturur:

import flash.display.Shape; 
import flash.display.GradientType; 
import flash.geom.Matrix; 
 
var type:String = GradientType.RADIAL; 
var colors:Array = [0x00FF00, 0x000088]; 
var alphas:Array = [1, 1]; 
var ratios:Array = [0, 255]; 
var spreadMethod:String = SpreadMethod.PAD; 
var interp:String = InterpolationMethod.LINEAR_RGB; 
var focalPtRatio:Number = 0; 
 
var matrix:Matrix = new Matrix(); 
var boxWidth:Number = 50; 
var boxHeight:Number = 100; 
var boxRotation:Number = Math.PI/2; // 90° 
var tx:Number = 25; 
var ty:Number = 0; 
matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty); 
 
var square:Shape = new Shape; 
square.graphics.beginGradientFill(type,  
                            colors, 
                            alphas, 
                            ratios,  
                            matrix,  
                            spreadMethod,  
                            interp,  
                            focalPtRatio); 
square.graphics.drawRect(0, 0, 100, 100); 
addChild(square);

Degrade dolgunun genişlik ve yüksekliğinin, Graphics nesnesi kullanılarak çizilen genişlik ve yükseklikle değil, degrade matrisinin genişlik ve yüksekliğiyle belirlendiğini unutmayın. Graphics nesnesiyle çizim yaparken, degrade matrisindeki bu koordinatlarda bulunanları çizersiniz. drawRect() gibi Graphics nesnesinin şekil yöntemlerinden birini de kullansanız, degrade çizilen şeklin boyutuna genişlemez—degradenin boyutu, degrade matrisinde belirtilmelidir.

Aşağıda, degrade matrisinin boyutları ile çizimin kendi boyutları arasındaki görsel fark gösterilmektedir:

var myShape:Shape = new Shape(); 
var gradientBoxMatrix:Matrix = new Matrix(); 
gradientBoxMatrix.createGradientBox(100, 40, 0, 0, 0); 
myShape.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); 
myShape.graphics.drawRect(0, 0, 50, 40); 
myShape.graphics.drawRect(0, 50, 100, 40); 
myShape.graphics.drawRect(0, 100, 150, 40); 
myShape.graphics.endFill(); 
this.addChild(myShape);

Bu kod, eşit kırmızı, yeşil ve mavi dağılımıyla belirtilen aynı dolgu stiline sahip üç degrade çizer. Degradeler, sırayla 50, 100 ve 150 piksel genişliyle drawRect() yöntemi kullanılarak çizilir. beginGradientFill() yönteminde belirtilen degrade matris, 100 piksel genişliğinde oluşturulur. Başka bir deyişle, birinci degrade, degrade spektrumunun yalnızca yarısını içerir, ikinci degrade tamamını içerir ve üçüncü degrade de tamamını ve ek olarak sağa genişleyen 50 piksel mavi içerir.

lineGradientStyle() yöntemi, beginGradientFill() öğesine benzer şekilde çalışır, tek farkı, çizime başlamadan önce degradeyi tanımlamanın yanı sıra lineStyle() yöntemini kullanarak kontur kalınlığını da belirtmenizin gerekmesidir. Aşağıdaki kod, kırmızı, yeşil ve mavi degrade konturu ile bir kutu çizer:

var myShape:Shape = new Shape(); 
var gradientBoxMatrix:Matrix = new Matrix(); 
gradientBoxMatrix.createGradientBox(200, 40, 0, 0, 0); 
myShape.graphics.lineStyle(5, 0); 
myShape.graphics.lineGradientStyle(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); 
myShape.graphics.drawRect(0, 0, 200, 40); 
this.addChild(myShape);

Matrix sınıfı hakkında daha fazla bilgi almak için, bkz. Matrix nesnelerini kullanma.