В данном уроке рассмотрим основы рисования простых векторных форм при помощи ActionScript 3.0. Это можно проделать, используя различные методы класса Graphics, создавать линии, заливку и примитивные формы. Урок предназначен для новичков и не требует каких-то особых знаний в AS3, кроме как основ языка.

Изучив эту тему, вы сможете рисовать векторные объекты и отображать их на экране при помощи ActionScript 3, как показано на изображении:

Урок состоит из следующих тем:

1. Введение
2. Рисование прямой линии
3. Рисование изогнутой линии
4. Создание форм с заливкой
5. Удаление векторных объектов
6. Рисование прямоугольников и окружностей

Введение

Векторные объекты в AS3 создаются при помощи класса Graphics. В отличие от других классов, для этого класса не нужно создавать экземпляр перед использованием, так как он уже инициализирован в качестве свойства любого отображаемого объекта, такого как Shape, Sprite и MovieClip.

Использование класса Graphics дает возможность применять механизм рисования инструментом pen (перо) и двигать указатель от одной точки к другой, рисуя линии. Вы можете использовать этот метод для заливки области вокруг линий, которые создаете, или в качестве альтернативы, использовать определенные методы формы для рисования объектов, таких как прямоугольники и круги.

Основные методы класса Graphics для рисования векторных объектов:

• lineStyle() — Определяет вид любой создаваемой линии.
• moveTo() — Перемещает указатель рисования в определенную точку.
• lineTo() — Рисует линию до определенной точки.
• curveTo() — Рисует изогнутую линию до определенной точки.
• beginFill() — Запускает заливку цветом области между линиями.
• endFill() — Завершает процесс заливки области между линиями.
• clear() — Очищает все векторные объекты внутри объекта graphics.

Существуют некоторые продвинутые методы рисования градиентом, которые не рассматриваются в этом уроке. Другие методы рисования простых форм будут рассмотрены позже.

Рисование прямой линии

Перед рисованием любых объектов нужно создать экземпляр, в который будет помещаться рисунок. Необходимо создать экземпляр класса Shape, Sprite или MovieClip для размещения в нем нарисованных объектов. Класс Shape наименее требователен к использованию ресурсов памяти компьютера, так что вы всегда можете использовать его, если нет особой необходимости в функциональных возможностях классов Sprite или MovieClip.

var my_shape:Shape = new Shape();

Добавляем созданный объект в список отображения (Display List) так, чтобы все, что будем рисовать на нем сразу отображалось на сцене. Делается это при помощи метода AddChild():

var my_shape:Shape = new Shape();
addChild(my_shape);

Вы можете прочитать о списке отображения в уроке «AdobeFlash Список отображения».

Первый шаг в процессе рисования линии это установка свойств типа линии. По умолчанию это свойство не установлено, поэтому любая линия, которую вы рисуете, будет невидимой. Установить свойство типа линии, можно используя метод .lineStyle(). Этот метод имеет некоторое количество необязательных свойств, таких как толщина линии, цвет и прозрачность. В примере ниже будет использоваться красная линия толщиной в 1px, которая полностью непрозрачна. Это делается следующим образом.

Не забывайте о том, что методы класса Graphics используются через свойство graphics, а не напрямую через экземпляр класса Shape.

Стиль линии готов. Можно двигаться дальше и начать рисование линии, но мы уже это сделали. Теперь можно определить начальную точку линии. По умолчанию линия будет начинаться с предыдущей точки, на которой находится указатель, потому что мы не перемещали его в другое место, поэтому начальная точка будет равна 0, 0. Так как нам не нужно начинать с этой позиции, переместим указатель на другую точку, используя метод .moveTo(). Этот метод требует в качестве параметров координаты x и y, в которые будет перемещен указатель. Переместим указатель в точку 50, 50 на сцене. Это можно сделать следующим образом:

var my_shape:Shape = new Shape();
addChild(my_shape);
my_shape.graphics.lineStyle(1, 0xFF0000, 1);
my_shape.graphics.moveTo(50, 50);

Теперь у нас есть начальная точка для линии, с которой мы можем начать рисование, используя метод lineTo(). При помощи этого метода нужно определить точку, где будет заканчиваться линия. Мы можем указать значения 100, 50 в качестве точки, до которой будет нарисована линия:

var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);
my_shape.graphics.moveTo(50, 50);
my_shape.graphics.lineTo(100, 50);

Протестируем flash-приложение (ctrl + enter), в котором можно видеть, что первая линия нарисована красным цветом с точки 50, 50 до точки 100, 50. Ниже показаны те действия, которые мы проделали.

Мы можем продолжить рисование линий от одной к другой, указывая последующую точку для того, чтобы создать необходимый объект. Код ниже создает квадрат, он несложный в понимании:

var my_shape:Shape = new Shape();
addChild(my_shape);
my_shape.graphics.lineStyle(1, 0xFF0000, 1);
my_shape.graphics.moveTo(50, 50);
my_shape.graphics.lineTo(100, 50);
my_shape.graphics.lineTo(100, 100);
my_shape.graphics.lineTo(50, 100);
my_shape.graphics.lineTo(50, 50);

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

Чтобы нарисовать другой объект или линию и не соединять следующую линию с предыдущей, нужно снова использовать метод moveTo(), чтобы переместить указатель туда, где нужно нарисовать новый объект, а затем продолжить с использованием метода lineTo().

Рисование изогнутой линии

Для рисования изогнутой линии необходим дополнительный шаг по созданию контрольной точки, которая определяет форму изогнутой линии. Итак, в дополнение к последней точки изогнутой линии нужно указать управление, которое размещается между двумя начальной и конечной точками. Это делается при помощи метода curveTo(), где x1 и y1 являются координатами контрольной точкой, в то время как x2 и y2 — это координаты последней точки.

my_shape.graphics.curveTo(x1, y1, x2, y2);

Если вы хотите создать простую форму в виде овала, используя две изогнутые линии, нужно сделать это, используя код ниже. Стоит отметить, что использование метода curveTo() требует таких же подготовительных действий, что и метод lineTo(), а именно создание объекта класса Shape и установки типа линии при помощи метода lineStyle().

var my_shape:Shape = new Shape();
addChild(my_shape);
my_shape.graphics.lineStyle(1, 0xFF0000, 1);
my_shape.graphics.moveTo(0, 50);
my_shape.graphics.curveTo(25, 0, 50, 50);
my_shape.graphics.curveTo(25, 100, 0, 50);

Создание форм с заливкой

Любая форма, созданная при помощи методов lineTo() и curveTo() может быть заполнена заливкой какого-либо цвета, чтобы закрыть область между линиями. Для этого нужно просто использовать метод beginFill(), чтобы назначить цвет заливки. Этот метод применяется следующим образом:

var my_shape:Shape = new Shape();
addChild(my_shape);
my_shape.graphics.lineStyle(1, 0x0000FF, 1);
my_shape.graphics.beginFill(0x0099FF,1);
my_shape.graphics.moveTo(50, 50);
my_shape.graphics.lineTo(100, 50);
my_shape.graphics.lineTo(100, 100);
my_shape.graphics.lineTo(50, 100);
my_shape.graphics.lineTo(50, 50);

Также хорошей практикой является указание того, где предполагается завершение заливки при помощи метода endFill(), чтобы предотвратить любые нежелательные результаты:

Можно использовать заливку без применения метода lineStyle(), если вы не хотите, чтобы у объекта был контур. Запустите и протестируйте пример, чтобы увидеть, что квадрат заполнен цветом.

Удаление векторных объектов

Если по какой-то причине вы хотите удалить все векторные линии, которые нарисовали, в объекте, то вы можете сделать это, используя метод clear(). Этот метод не способен удалять какие-либо выборочные векторные объекты, а удаляет все векторные линии и заливки, которые были помещены внутри целевого объекта. Например, вы можете удалить квадрат с заливкой, который сделали ранее, вызвав метод clear() следующим образом:

var my_shape:Shape = new Shape();
addChild(my_shape);
my_shape.graphics.lineStyle(1, 0x0000FF, 1);
my_shape.graphics.beginFill(0x0099FF,1);
my_shape.graphics.moveTo(50, 50);
my_shape.graphics.lineTo(100, 50);
my_shape.graphics.lineTo(100, 100);
my_shape.graphics.lineTo(50, 100);
my_shape.graphics.lineTo(50, 50);
my_shape.graphics.endFill();
my_shape.graphics.clear();

Теперь вы должны научиться рисовать и закрашивать простые формы используя класс Graphics. Далее мы рассмотрим некоторые методы, которые позволяют рисовать определенные формы намного легче.

Рисование прямоугольников и окружностей

В дополнение к основным методам рисования линий и изогнутых линий ActionScript 3 предоставляет некоторые методы рисования объектов, таких как прямоугольник и окружность. Вот те методы, которые мы рассмотрим: drawRect(), drawCircle() и drawRoundRect().

drawRect() позволят нарисовать прямоугольник. Этот метод используется следующим образом:

drawRect(x, y, width, height);

Так что если нужно нарисовать прямоугольник, расположенный в точке (50, 50), который имеет ширину 300px и высоту 100px, то это можно сделать следующим способом:

var my_shape:Shape = new Shape();
addChild(my_shape);
my_shape.graphics.lineStyle(1, 0x0000FF, 1);
my_shape.graphics.beginFill(0x0099FF,1);
my_shape.graphics.drawRect(50, 50, 300, 100);
my_shape.graphics.endFill();

drawCircle() позволяет нарисовать окружность. Этот метод используется следующим образом:

drawCircle(x, y, radius);

Так что, если вы хотите нарисовать окружность, расположенную в точке (150, 150) и которая имеет радиус 25px, то вы можете сделать это следующим способом:

var my_shape:Shape = new Shape();
addChild(my_shape);
my_shape.graphics.lineStyle(1, 0x0000FF, 1);
my_shape.graphics.beginFill(0x0099FF,1);
my_shape.graphics.drawCircle(150, 150, 25);
my_shape.graphics.endFill();

drawRoundRect() позволяет нарисовать прямоугольник с закругленными углами. Этот метод используется следующим образом:

drawRoundRect(x, y, width, height, ellipse_width, ellipse_height);

Параметр ellipse_height необязательный. Так что, если вы хотите создать прямоугольник с закругленными углами, расположенный в точке (50, 50) с шириной 300px и высотой 100px, и шириной эллипса 25, вы можете сделать это следующим способом:

var my_shape:Shape = new Shape();
addChild(my_shape);
my_shape.graphics.lineStyle(1, 0x0000FF, 1);
my_shape.graphics.beginFill(0x0099FF,1);
my_shape.graphics.drawRoundRect(50, 50, 300, 100, 25);
my_shape.graphics.endFill();

Теперь вы должны научиться рисовать простые объекты, используя методы, которые описаны в этом уроке. Вам следует знать о существовании некоторых других методов нанесения градиентных цветов и о рисовании некоторых других форм. Вы можете прочитать об этом в справочнике ActionScript 3.0.

Чтобы сохранить урок — добавьте его в закладки социальных сетей (значки внизу). Если у вас возникли какие-то вопросы, то можете задавать их в комментариях.

Смотрите также:

Хитрости Flash и советы для дизайнеров: рисование

ActionScript 3: Создание анимации при помощи класса Tween

Adobe Flash: Простая анимация