Я уже неоднократно обращался к теме динамического рисования в ActionScript (посты №18, №28, №32 и №42). Но сегодня будут рассмотрены не стандартные возможности языка ActionScript 3.0, а библиотека классов от dncompute.com, которая к уже имеющимся в арсенале AS 3.0 геометрическим примитивам добавляет возможность быстрого и удобного создания различных указателей (arrow). То есть, к таким методам как drawRect(), drawRoundRect(), drawCircle() и подобным, добавляется ещё один очень полезный метод - drawArrow(). С помощью метода drawArrow() можно, например, одной строчкой кода создать следующий указатель:
Работать с методом drawArrow() довольно просто. Ниже представлен простой случай использования данного метода в флеш-проекте.
Код ActionScript 3.0:
/*
Импортируем класс GraphicsUtil.
*/
import com.dncompute.graphics.GraphicsUtil;
/*
Создаём спрайт-контейнер, в котором и будем рисовать указатель.
Для спрайта-контейнера указываем стиль обводки и цвет заливки, которые будут применены и к указателю.
*/
var cont:Sprite = new Sprite();
cont.graphics.lineStyle(1,0x000000);
cont.graphics.beginFill(0x999999);
/*
Рисуем указатель.
*/
GraphicsUtil.drawArrow(cont.graphics, new Point(100, 100), new Point(450, 300));
/*
Завершаем заливку (необязательно).
*/
cont.graphics.endFill();
/*
Добавляем спрайт-контейнер в список отображения.
*/
addChild(cont);
Получаем следующий результат (для наглядности добавлены точки с указанием координат по оси x и y):
Да, указатель из приведённого выше примера выглядит довольно скучно. Но это поправимо. Дело в том, что метод drawArrow() может принимать ряд дополнительных параметров, с помощью которых можно сделать указатель на любой, даже самый капризный, вкус. Все эти параметры являются свойствами класса ArrowStyle (входит в состав рассматриваемой библиотеки классов).
Свойства класса ArrowStyle:
- shaftThickness - толщина основной части указателя;
- headWidth - ширина головной части стрелки;
- headLength - длина головной части стрелки;
- shaftPosition - изменяет форму головной части указателя
- edgeControlPosition - регулирует искривление краёв головной части стрелки.
Пример использования класса ArrowStyle для настройки стиля указателя приводится ниже:
/*
Импортируем необходимые классы.
*/
import com.dncompute.graphics.GraphicsUtil;
import com.dncompute.graphics.ArrowStyle;
/*
Определяем стиль будущей стрелки.
*/
var arrow_style:ArrowStyle = new ArrowStyle();
arrow_style.shaftThickness = 5;
arrow_style.headWidth = 50;
arrow_style.headLength = 50;
arrow_style.shaftPosition = .5;
arrow_style.edgeControlPosition = .5;
/*
Создаём спрайт-контейнер, в котором и будем рисовать стрелку.
*/
var cont:Sprite = new Sprite();
cont.graphics.beginFill(0x999999);
/*
Рисуем стрелку.
*/
GraphicsUtil.drawArrow(cont.graphics, new Point(100, 100), new Point(450, 300), arrow_style);
/*
Завершаем заливку (необязательно).
*/
cont.graphics.endFill();
/*
Добавляем спрайт-контейнер в список отображения.
*/
addChild(cont);
Теперь стрелка смотрится гораздо лучше.
Данную библиотеку классов можно использовать по-разному. Для примера я немного изменил демо-ролик из урока по созданию пользовательского курсора мышки на ActionScript 3.0, добавив новый курсор:
import com.dncompute.graphics.GraphicsUtil;
Mouse.hide();
var cur:Sprite = new Sprite();
cur.graphics.beginFill(0x333333);
GraphicsUtil.drawArrow(cur.graphics, new Point(30, 30), new Point(0, 0), {shaftThickness:5,headWidth:30,headLength:40, shaftPosition:0.50,edgeControlPosition:0.50});
cur.graphics.endFill();
addChild(cur);
cur.visible = false;
cur.mouseEnabled = false;
var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance = 5;
shadow.color = 0x999999;
shadow.alpha = 0.5;
shadow.angle = 45;
cur.filters = [shadow];
stage.addEventListener(MouseEvent.MOUSE_MOVE,mMove);
function mMove(event:MouseEvent):void
{
var coordX:int = event.stageX;
var coordY:int = event.stageY;
if (coordX >= 0 && coordY >= 0 && coordX <= stage.stageWidth && coordY <= stage.stageHeight)
{
cur.visible = true;
cur.x = coordX;
cur.y = coordY;
event.updateAfterEvent();
}
}
stage.addEventListener(Event.MOUSE_LEAVE, mLeave);
function mLeave(event:Event):void
{
cur.visible = false;
}
Получилось следующее:
Уверен, что найдётся не мало случаев, когда метод drawArrow() облегчит вашу работу над флеш-проектом.
Исходники приведённых примеров можно скачать тут (под Adobe Flash CS5.5).