Tworzenie linii i wypełnień gradientowych

Do definiowania gradientów używanych w kształtach służą metody beginGradientFill() i lineGradientStyle() klasy flash.display.Graphics. Definiując gradient, należy przekazać macierz jako jeden z parametrów tych metod.

Najprostszym sposobem zdefiniowania macierzy jest użycie metody createGradientBox() klasy Matrix. Metoda ta tworzy macierz służącą do definiowania gradientu. Skalę, obrót i położenie gradientu definiuje się za pomocą parametrów przekazywanych do metody createGradientBox() . Metoda createGradientBox() przyjmuje następujące parametry:

• Szerokość pola gradientu: szerokość (w pikselach), na jakiej gradient zostanie rozpostarty.

• Wysokość pola gradientu: wysokość (w pikselach), na jakiej gradient zostanie rozpostarty.

• Obrót pola gradientu: obrót (w radianach), jakie zostanie zastosowany do gradientu.

• Translacja pozioma: odległość (w pikselach), na jaką gradient zostanie przesunięty w poziomie.

• Translacja pionowa: odległość (w pikselach), na jaką gradient zostanie przesunięty w pionie.

Na przykład weźmy pod uwagę gradient o następujących cechach:

• GradientType.LINEAR

• Dwa kolory, zielony i niebieski, ze tablicą ratios zawierającą wartości [0, 255]

• SpreadMethod.PAD

• InterpolationMethod.LINEAR_RGB

Poniższe przykłady przedstawiają gradienty, w których parametr rotation metody createGradientBox() ma różne wartości, ale wszystkie inne ustawienia są identyczne:

Poniższe przykłady ilustrują zmiany liniowego gradientu zielono-niebieskiego, w którym parametry rotation , tx i ty metody createGradientBox() mają różne wartości, ale wszystkie inne ustawienia są identyczne:

Parametry width , height , tx i ty metody createGradientBox() mają wpływ na rozmiar i położenie promieniowego wypełnienia gradientowego, co ilustruje poniższy przykład:

Poniższy kod generuje ostatni przedstawiony gradient promieniowy:

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

Należy zwrócić uwagę, że szerokość i wysokość wypełnienia gradientowego zależy od szerokości i wysokości macierzy gradientu, a nie od szerokości lub wysokości określonej przy rysowaniu za pomocą obiektu Graphics. Rysowanie w obiekcie Graphics sprowadza się do narysowania zawartości macierzy gradientu w danych współrzędnych. Nawet jeśli użyto jednej z metod do rysowania kształtów w obiekcie Graphics, takich jak drawRect() , gradient nie dopasowuje się do narysowanego kształtu — rozmiar gradientu należy określić w macierzy gradientu.

Poniżej zilustrowano widoczne różnice między wymiarami macierzy gradientu a wymiarami narysowanego kształtu:

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

Ten kod rysuje trzy gradienty z tym samym stylem wypełnienia, w którym kolory czerwony, zielony i niebieski są równomiernie rozmieszczone. Gradienty rysowane są przy użyciu metody drawRect() z podaną szerokością odpowiednio 50, 100 i 150 pikseli. Macierz gradientu określona w metodzie beginGradientFill() ma szerokość 100 pikseli. Oznacza to, że pierwszy gradient obejmie tylko połowę całego „widma” trzech kolorów, drugi obejmie wszystkie kolory, a trzeci także obejmie wszystkie kolory i będzie zawierał dodatkowo 50 pikseli koloru niebieskiego po prawej stronie.

Metoda lineGradientStyle() działa podobnie jak metoda beginGradientFill() , z tym że przed rozpoczęciem rysowania oprócz zdefiniowania gradientu należy określić grubość obrysu, korzystając z metody lineStyle() . Poniższy kod rysuje prostokąty z obrysami w kolorze czerwonym, zielonym i niebieskim.

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

Więcej informacji na temat klasy Matrix zawiera sekcja Korzystanie z obiektów Matrix .