Ş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
.