Rysowanie gradientów jest procesem, na który wpływ ma stosunkowo wiele parametrów. Żeby być w pełni świadomym możliwości jakie w tej dziedzinie oferuje Flex sprawdzimy w jaki sposób każdy z nich oddziałuje na wygląd gradientu.
Spis treści
Aplikacja
Poniższa aplikacja pozwala przetestować sposób w jaki poszczególne parametry rysowania gradientu wpływają na jego wygląd.
Wstęp do rysowania gradientu
Gradient możemy narysować na dowolnym obiekcie dziedziczącym po klasie Sprite poprzez odwołanie się do jego pola graphics, wywołanie na nim metody beginGradientFill i narysowaniu kształtu, który będzie wypełniony gradientem.
Schemat rysowania gradientu na prostokącie:
sprite.graphics.drawRect(rectX, rectY, rectWidth, rectHeight);
sprite.graphics.endFill();
Wszystkie parametry podane w powyższym schemacie należy zastąpić odpowiednimi wartościami, których opis znajduje się w dalszej części wpisu. Tylko cztery pierwsze parametry metody beginGradientFill są wymagane, pozostałe posiadają zdefiniowane wartości domyślne. Gradient zostanie narysowany na dowolnym kształcie geometrycznym opisanym pomiędzy wywołaniami metod beginGradientFill a endFill.
Parametry rysowania gradientu
- Typ gradientu (par. type)
- LINEAR – Gradient liniowy.
- RADIAL – Gradient promienisty.
- LINEAR – Gradient liniowy.
- Tablica kolorów (par. colors) – Określa kolory jakie zostaną użyte do narysowania gradientu. Dla gradientu liniowego podane kolory zostaną zastosowane od strony lewej do prawej natomiast w przypadku gradientu promienistego od wnętrza do zewnętrza.
- Tablica wartości alfa (par. alphas) – Określa stopień przeźroczystości kolorów zdefiniowanych w tablicy kolorów. Liczba elementów w tablicy wartości alfa musi być równa liczbie elementów w tablicy kolorów. Wartości alfa należą do przedziału <0,1>.
- Tablica proporcji (par. ratios) – Określa proporcje w jakich gradient osiągnie poszczególne kolory z tablicy kolorów. Liczba elementów w tablicy proporcji musi być równa liczbie elementów w tablicy kolorów. Wartości proporcji należą do przedziału <0,255>, gdzie 0 oznacza początek gradientu natomiast 255 jego koniec. Każda kolejna wartość w tablicy proporcji musi być większa lub równa wartości poprzedzającej ją.
Poniższy rysunek przedstawia trzy gradienty kolorów czarnego i białego narysowane z różnymi proporcjami.
- Macierz transformacji (par. matrix) (wartość domyślna: null) – Obiekt typu Matrix. Wywołujemy na nim metodę createGradientBox w celu określenia wyglądu gradientu. Metoda createGradientBox przyjmuje następujące parametry:
- width – Szerokość gradientu.
- height – Wysokość gradientu.
- rotation – Obrót gradientu w radianach.
- tx – Poziome przesunięcie gradientu.
- ty – Pionowe przesunięcie gradientu.
- Metoda rozprzestrzeniania gradientu (par. spreadMethod) (wartość domyślna: PAD) – Wymiary (szerokość i wysokość) gradientu określane są w macierzy transformacji, natomiast wymiary obszaru na jakim gradient zostanie narysowany określane są poprzez wymiary kształtu, który zostanie wypełniony gradientem. W przypadku kiedy wymiary gradientu są mniejsze od wymiarów kształtu, który wypełnia gradient sposób wypełnienia pustej przestrzeni określany jest przez parametr spreadMethod.
Poniższy rysunek przedstawia sposób rozprzestrzenienia gradientu za pomocą metody REPEAT w sytuacji, w której szerokość gradientu jest kilkukrotnie mniejsza niż szerokość wypełnionego nim prostokąta.
- PAD – Pustą przestrzeń wypełniają krańcowe kolory gradientu.
- REFLECT – Pustą przestrzeń wypełniają kolejne wystąpienia gradientu z odwróconą kolejnością kolorów składowych.
- REPEAT – Pustą przestrzeń wypełniają kolejne wystąpienia gradientu.
- PAD – Pustą przestrzeń wypełniają krańcowe kolory gradientu.
- Metoda interpolacji gradientu (par. interpolationMethod) (wartość domyślna: RGB) – Określa czy zmiana koloru będzie następować w sposób liniowy czy wykładniczy.
- RGB – Zmiana koloru w sposób wykładniczy.
- LINEAR_RGB – Zmiana koloru w sposób liniowy.
- RGB – Zmiana koloru w sposób wykładniczy.
- Położenie ogniskowej gradientu (par. focalPointRatio) (wartość domyślna: 0) – Określa położenie ogniskowej gradientu. Wartości jakie przyjmuje ten parametr należą do zakresu od -1 do 1. Wartość 0 oznacza położenie ogniskowej na środku gradientu, natomiast wartości -1 i 1 oznaczają położenie ogniskowej na krawędziach gradientu.
Przykładowe narysowanie gradientu na obiekcie typu Sprite:
matrix.createGradientBox(100,100,0,0,0);
sprite.graphics.beginGradientFill(
GradientType.RADIAL,
[0xffffff,0x000000],
[1,1],
[0,255],
matrix,
SpreadMethod.REFLECT,
InterpolationMethod.RGB,
1
);
sprite.graphics.drawRect(0,0,gradientGroup.width,gradientGroup.height);
sprite.graphics.endFill();
