Рисование API

Добавление заливки

Нарисовав набор линий, создающий путь, мы тем самым создадим заливку. Основным способом создания заливки является вызов функции beginFill и последующее рисование линий. Имейте в виду, что lineStyle может быть не указан. Тогда заливка будет прорисована без рамки. Ниже приведен ActionScript для заливки квадрата.

this.moveTo(100, 100);
this.beginFill(0xFF0000);
this.lineTo(200,  100);
this.lineTo(200,  200);
this.lineTo(100,  200);
this.lineTo(100,  100);
this.endFill();

Мы можем применить заливку, добавив вызов lineStyle:

this.moveTo(100, 100);
this.lineStyle(2, 0x000000);
this.beginFill(0xFF0000);
this.lineTo(200, 100);
this.lineTo(200, 200);
this.lineTo(100, 200);
this.lineTo(100, 100);
this.endFill();

В словаре ActionScript такая возможность не оговорена, но вы можете обнулить все установки lineStyle, один раз вызвав lineStyle без параметров. Итак, мы можем залить половину рамки.

this.moveTo(100, 100);
this.lineStyle(2, 0x000000);
this.beginFill(0xFF0000);
this.lineTo(200, 100);
this.lineTo(200, 200);
this.lineStyle();
this.lineTo(100, 200);
this.lineTo(100, 100);
this.endFill();

Таким образом, функции lineTo возвращают точки начала рисования на их исходные позиции. Здесь endFill в любом случае закрывает путь и проводит прямую линию обратно в начальную точку. Можно убрать строку кода, и будет по-прежнему выводиться красный квадрат.

this.moveTo(100, 100);
this.beginFill(0xFF0000);
this.lineTo(200, 100);
this.lineTo(200, 200);
this.lineTo(100, 200);
this.endFill();

Применив заливку к curveTo, можно рисовать квадрат со сглаженными углами, как показано ниже:

this.moveTo(100, 100);
this.beginFill(0xFF0000);
this.curveTo(150, 50, 200, 100);
this.curveTo(250, 150, 200, 200);
this.curveTo(150, 250, 100, 200);
this.curveTo(50, 150, 100, 100);
this.endFill();

Градиентная заливка

Прежде чем рассматривать градиентную заливку, мы вкратце рассмотрим один из способов использования функции beginGradientFill. Функция beginGradientFill должна иметь ряд параметров: необходимо передавать ей массивы, содержащие различные используемые цвета, интенсивности цветов, степени цветов, а также массив, содержащий значения для координат X и Y, наряду с шириной и высотой градиента. Вот как выглядит функция beginGradientFill в словаре ActionScript:

myMovieClip.beginGradientFill(fillType, colors, alphas, ratios, matrix);

С помощью первого метода использования функции, аргумент matrix обращается к матрице 3x3, используемой для управления внешним видом градиента, изгибами, размером, поворотом и переходом градиента. На данный момент мы закончим рассмотрение этого типа функции, так как она подробно описывается далее в этой книге.

При более простом способе передаваемый нами матричный объект содержит ширину, высоту, начальные координаты X и Y и значение поворота. В нем также содержится конечный параметр matrixType, который должен быть всегда установлен на значение box. При определении ширины и высоты градиента указывается область, к которой применяется градиент. Например, если мы определим линейный градиент с X=100, Y=100, шириной, равной 100 и высотой 100, градиент будет применен к области с 100 до 200 по оси X. Левая и правая области рядом с градиентом будут отображаться просто сплошным цветом.

Если вы посмотрите на следующий код, позиция X градиента равна 120, а его ширина равна 60. Рисуемая фигура отображается с позиции 100 по 200 по оси X, при этом со 100 по 120 имеет место сплошной розовый цвет, а с позиции 180 по 200 - сплошной оранжевый.

this.moveTo(100, 100);
colors = [0xFFE4E1, 0xFF6600];
alphas = [100, 100];
ratios = [23, 255];
matrix = {matrixType:"box", x:120, y:30, w:60, h:10, r:0};
beginGradientFill("linear", colors, alphas, ratios, matrix);
this.curveTo(150, 50, 200, 100);
this.curveTo(250, 150, 200, 200);
this.curveTo(150, 250, 100, 200);
this.curveTo(50, 150, 100, 100);
this.endFill() ;

Чтобы лучше разобраться, как градиент заполняет область, можно поэкспериментировать с различными значениями и посмотреть, как они влияют на результат. Например, в строке matrix в ActionScript выше приравняйте r к Math.PI. Вы увидите, что градиент развернется на 180 градусов (pi радиан).

Также интересно поменять местами X и Y. Здесь мы переместили радиальное заполнение на край нашей фигуры.

this.moveTo(100, 100);
colors = [0xFFE4E1, 0xff6600];
alphas = [100, 100];
ratios - [23, 255];
matrix = {matrixType:"box", x:100, y:30, w:100, h:100, r:1};
beginGradientFill("radial", colors, alphas, ratios, matrix);
this.curveTo(150, 50, 200, 100);
this.curveTo(250, 150, 200, 200);
this.curveTo(150, 250, 100, 200);
this.curveTo(50, 150, 100, 100);
this.endFill();

На первый взгляд этот метод кажется сложным, но если разобраться в том, как влияют числа на конечный результат, все становится понятно. Вы можете создать функцию enterFrame, которая будет изменять эти значения. Немного поэкспериментировав, можно добиваться довольно необычных эффектов.