Создание линий градиента и заливок

Для определения градиентов и использования их в фигурах используйте методы beginGradientFill() и lineGradientStyle() класса flash.display.Graphics. При определении градиента матрица предоставляется в качестве одного из параметров этих методов.

Наиболее простым способом определения матрицы является использование метода createGradientBox() класса Matrix, который создает матрицу, используемую для определения градиента. Масштаб, поворот и положение градиента указываются с помощью параметров, передаваемых в метод createGradientBox(). Метод createGradientBox() поддерживает следующие параметры.

• Ширина окна градиента: ширина (в пикселах), на которую будет распространяться градиент.

• Высота окна градиента: высота (в пикселах), на которую будет распространяться градиент.

• Поворот градиента: поворот (в радианах), применяемый к градиенту.

• Перемещение по горизонтали: на какое расстояние (в пикселах) по горизонтали будет перемещен градиент.

• Перемещение по вертикали: на какое расстояние (в пикселах) по вертикали будет перемещен градиент.

Например, рассмотрим градиент со следующими характеристиками:

• GradientType.LINEAR

• Два цвета (зеленый и синий) с массивом ratios[0, 255]

• SpreadMethod.PAD

• InterpolationMethod.LINEAR_RGB

В следующих примерах представлены градиенты, отличающиеся только по параметру rotation метода createGradientBox():

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;

В следующих примерах показано изменение линейных градиентов (от зеленого к синему), отличающихся только по параметрам rotation, tx и ty метода createGradientBox():

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;

Параметры width, height, tx и ty метода createGradientBox() также оказывают влияние на размер и положение заливки градиента radial, как это показано в следующем примере:

width = 50; height = 100; rotation = 0; tx = 25; ty = 0;

Радиальный градиент из последнего примера создан посредством следующего кода:

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

Обратите внимание, что ширина и высота заливки градиента определяются соответствующими параметрами матрицы градиента, а не объектом Graphics. При рисовании с помощью объекта Graphics рисунок создается в координатах матрицы градиента. Даже при использовании одного из методов фигур объекта Graphics, например drawRect(), градиент не растягивается до размера созданной фигуры; размер градиента необходимо указать в самой матрице градиента.

В примере представлено визуальное различие между размером матрицы градиента и размером самого рисунка:

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

С помощью этого кода создаются три градиента с одинаковым стилем заливки, цвет которой в равной степени содержит красный, зеленый и синей цвета. Градиенты создаются с помощью метода drawRect() с шириной 50, 100 и 150 пикселов соответственно. Ширина создаваемой матрицы градиента, указанной в методе beginGradientFill(), равна 100 пикселам. Это означает, что первый градиент охватит только половину спектра градиента, второй — весь спектр, третий — весь спектр, а также дополнительные 50 пикселов синего цвета, распространяющегося вправо.

Метод lineGradientStyle() аналогичен методу beginGradientFill(), за исключением того, что помимо определения градиента перед началом рисования необходимо указать толщину штриха с помощью метода lineStyle(). Следующий код создает прямоугольник с красным, зеленым и синим штрихом градиента:

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 см. в разделе «Использование объектов Matrix».