Когда-то, довольно давно, в посте «Динамическое рисование», я уже описывал стандартные методы динамического рисования векторной графики (так обычно называют создание визуальных объектов одним только кодом) в языке ActionScript 2.0. Сегодня же поговорим о динамическом рисовании в ActionScript 3.0.
И в AS 2.0, и в AS 3.0 эти методы имеют много общего. Но имеется и ряд существенных отличий:
- в ActionScript 3.0 расширен набор методов динамического рисования и больше нет надобности в написании собственных функций или использовании пользовательских классов и библиотек при отрисовке кодом геометрических примитивов (в ActionScript 2.0 даже для создания таких примитивов, как круг и прямоугольник, приходилось или писать свою функцию, или прибегать к таким сторонним решениям, как класс Graphics);
- в ActionScript 3.0 можно рисовать кодом не только внутри MovieClip-ов (что, скорее всего, нерационально и является напрасной тратой ресурсов), но и внутри ещё ряда объектов списка отображения (обычно, контейнером для динамически создаваемой графики в этом языке являются Sprite или Shape);
- в ActionScript 3.0 методы динамического рисования относятся к классу Graphics и для обращения к ним используется свойство graphics у объектов MovieClip, Sprite и Shape.
Теперь давайте перечислим основные (но далеко не все!) методы динамического рисования, имеющиеся в арсенале языка ActionScript 3.0:
1.) метод beginFill() устанавливает одноцветную заливку. Имеет параметры:
- цвет заливки;
- прозрачность заливки (в диапазоне от 0 до 1).
Для примера нарисуем квадрат с полупрозрачной (0.5) чёрной (0x000000) заливкой...
Код ActionScript 3.0:
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0x000000,0.5);
mc.graphics.drawRect(50,50,100,100);
mc.graphics.endFill();
addChild(mc);
Если нам надо сменить цвет заливки, то мы можем поступить так:
Код ActionScript 3.0:
var mc:MovieClip = new MovieClip();
/*
рисуем чёрный прямоугольник
*/
mc.graphics.beginFill(0x000000,1);
mc.graphics.drawRect(50,50,100,100);
mc.graphics.endFill();
/*
рисуем красный прямоугольник
*/
mc.graphics.beginFill(0xff0000,1);
mc.graphics.drawRect(150,150,100,100);
mc.graphics.endFill();
/*
добавляем мувик на сцену флеш-ролика
*/
addChild(mc);
Или воспользоваться чуть меньшим количеством строк кода:
Код ActionScript 3.0:
var mc:MovieClip = new MovieClip();
/*
рисуем чёрный прямоугольник
*/
mc.graphics.beginFill(0x000000,1);
mc.graphics.drawRect(50,50,100,100);
/*
рисуем красный прямоугольник
*/
mc.graphics.beginFill(0xff0000,1);
mc.graphics.drawRect(150,150,100,100);
/*
добавляем мувик на сцену флеш-ролика
*/
addChild(mc);
2.) метод endFill() - применяет установленную ранее заливку. Параметров не имеет.
3.) метод lineStyle() - задаёт стиль линии, которая будет использоваться в дальнейшем рисовании. Имеет следующие основные (!) параметры:
- толщина линии (это целое число в диапазоне от 0 до 255);
- цвет линии;
- прозрачность линии (в диапазоне от 0 до 1).
Для примера нарисуем непрозрачную (1) красную (0xff0000) линию толщиной 5px...
Код ActionScript 3.0:
var sprite:Sprite = new Sprite();
sprite.graphics.lineStyle(5,0xff0000,1);
sprite.graphics.moveTo(50,50);
sprite.graphics.lineTo(250,250);
addChild(sprite);
Если во время рисования надо сменить стиль линии, то делается это примерно так:
Код ActionScript 3.0:
var sprite:Sprite = new Sprite();
/*
рисуем красную линию
*/
sprite.graphics.lineStyle(1,0x000000,1);
sprite.graphics.moveTo(50,50);
sprite.graphics.lineTo(250,250);
/*
рисуем чёрную линию
*/
sprite.graphics.lineStyle(10,0xff0000,1);
sprite.graphics.moveTo(50,100);
sprite.graphics.lineTo(250,350);
/*
добавляем на сцену
*/
addChild(sprite);
4.) метод moveTo() - устанавливает точку начала рисования. Имеет два параметра:
- положение точки по оси x;
- положение точки по оси y.
И тут стоит напомнить о системе координат в флеш-роликах:
Как видите, точка начала координат расположена в верхнем левом углу флеш-ролика. Не забывайте про это при работе с Flash.
5.) метод lineTo() - устанавливает конечную точку прямой. Имеет два параметра:
- положение точки по оси x;
- положение точки по оси y.
Для примера нарисуем чёрную линию толщиной 1px из точки с координатами (100,100) в точку с координатами (450,200).
Код ActionScript 3.0:
var sprite:Sprite = new Sprite();
sprite.graphics.lineStyle(1,0x000000,1);
sprite.graphics.moveTo(100,100);
sprite.graphics.lineTo(450,200);
addChild(sprite);
Если вы рисуете какую-то ломанную линию, то каждый раз указывать начальную точку рисования с помощью метода moveTo() нет необходимости. Дело в том, что в качестве начальной точки для рисования линии автоматически будет браться точка из предыдущего метода lineTo(). Вот пример...
Код ActionScript 3.0:
var sprite:Sprite = new Sprite();
sprite.graphics.lineStyle(1,0x000000,1);
sprite.graphics.moveTo(100,100);
sprite.graphics.lineTo(300,200);
sprite.graphics.lineTo(200,100);
sprite.graphics.lineTo(450,200);
addChild(sprite);
6.) метод curveTo() - этот метод используется для рисования кривых. Про рисование кривых в ActionScript я уже подробно писал в посте «Динамическое рисование кривых в ActionScript».
7.) метод drawCircle() - это метод для рисование окружностей. Имеет три параметра:
- положение центра окружности по оси x;
- положение центра окружности по оси y;
- радиус окружности.
Для примера нарисуем окружность с координатами (200,200) и радиусом 100px.
Код ActionScript 3.0:
var shape:Shape = new Shape();
shape.graphics.beginFill(0x000000,1);
shape.graphics.lineStyle(1,0x000000,1);
shape.graphics.drawCircle(200,200,100);
shape.graphics.endFill();
addChild(shape);
8.) метод drawEllipse() - этот метод рисует эллипс и работает иначе, чем предыдущий метод для рисования окружности. Имеет 4 параметра:
- координаты верхнего левого "угла" эллипса по оси x;
- координаты верхнего левого "угла" эллипса по оси y;
- ширина эллипса;
- высота эллипса.
Для примера нарисуем эллипс, размером 550 на 400 и координатами (0,0).
Код ActionScript 3.0:
var shape:Shape = new Shape();
shape.graphics.beginFill(0x000000,1);
shape.graphics.drawEllipse(0,0,550,400);
shape.graphics.endFill();
addChild(shape);
9.) метод drawRect() - этот метод используется для отрисовки прямоугольников. Порядок и набор параметров у этого метода точно такой же, как и у ранее рассмотренного метода drawEllipse(). Пример прилагается...
Код ActionScript 3.0:
var shape:Shape = new Shape();
shape.graphics.lineStyle(1,0xff0000,1);
shape.graphics.beginFill(0x000000,1);
shape.graphics.drawRect(50,50,450,300);
shape.graphics.endFill();
addChild(shape);
10.) метод drawRoundRect() - используется для рисования прямоугольников с закруглёнными углами. Имеет шесть параметров, из которых первые четыре аналогичны тем, которые используются в методах drawEllipse() и drawRect(). А два последних параметра метода drawRoundRect() отвечают за округление углов.
Код ActionScript 3.0:
var shape:Shape = new Shape();
shape.graphics.lineStyle(1,0xff0000,1);
shape.graphics.beginFill(0x000000,1);
shape.graphics.drawRoundRect(50,50,450,300,30,30);
shape.graphics.endFill();
addChild(shape);
11.) метод clear() - стирает ранее нарисованную векторную графику. Смотрите пример...
Код ActionScript 3.0:
var shape:Shape = new Shape();
/*
рисуем чёрный прямоугольник
*/
shape.graphics.beginFill(0x000000,1);
shape.graphics.drawRect(50,50,450,300);
shape.graphics.endFill();
/*
стираем ранее нарисованное
*/
shape.graphics.clear();
/*
рисуем красный круг
*/
shape.graphics.beginFill(0xff0000,1);
shape.graphics.drawCircle(275,200,100);
shape.graphics.endFill();
/*
добавляем на сцену флеш-ролика
*/
addChild(shape);
Как видите, чёрный прямоугольник действительно был стёрт и на сцене можно видеть только красный круг, который был нарисован уже после вызова метода clear().
Здесь я перечислил и описал только основные и часто используемые методы динамического рисования в ActionScript 3.0. На самом деле методов программного рисования в этом языке больше и их количество, скорее всего, будет со временем только расти. Но многие из этих методов довольно сложны и описать их работы в рамках одного поста сложно. Впрочем, я ещё не раз вернусь к теме динамического рисования. А на этом пока всё :-)
Рейтинг поста: 
