Продолжаю тему динамического рисования в ActionScript и сейчас обратимся к работе с кривыми.
И в языке AS 2.0, и в AS 3.0 имеется метод curveTo(), который рисует кривые (квадратичные кривые Безье). Синтаксис самого метода на этих двух языках выглядит одинаково:
curveTo(координаты_контрольной_точки_по_оси_x, координаты_контрольной_точки_по_оси_y, координаты_якорной_точки_по_оси_x, координаты_якорной_точки_по_оси_y);
Знаю, в первый раз эта конструкция выглядит... малопонятной. Поэтому я и решил проиллюстрировать работу метода curveTo() с помощью небольшой программки, написанной на ActionScript 3.0.
Код ActionScript 3.0:
/*
Создаём спрайт-контейнер, в котором и будем рисовать кривую.
*/
var cont:Sprite = new Sprite();
addChild(cont);
/*
Спрайт, который соответствует точке начала рисования кривой.
*/
var t1:Sprite = new Sprite();
t1.graphics.beginFill(0x333333);
t1.graphics.drawCircle(0,0,10);
t1.graphics.endFill();
cont.addChild(t1);
t1.x = 100;
t1.y = 100;
t1.addEventListener(MouseEvent.MOUSE_DOWN, tDown);
t1.addEventListener(MouseEvent.MOUSE_UP, tUp);
/*
Спрайт, который соответствует точке окончания кривой.
*/
var t2:Sprite = new Sprite();
t2.graphics.beginFill(0x333333);
t2.graphics.drawCircle(0,0,10);
t2.graphics.endFill();
cont.addChild(t2);
t2.x = 450;
t2.y = 300;
t2.addEventListener(MouseEvent.MOUSE_DOWN, tDown);
t2.addEventListener(MouseEvent.MOUSE_UP, tUp);
/*
Спрайт, который соответствует контрольной точке кривой.
*/
var t3:Sprite = new Sprite();
t3.graphics.beginFill(0xff0000);
t3.graphics.drawCircle(0,0,10);
t3.graphics.endFill();
cont.addChild(t3);
t3.x = 100;
t3.y = 300;
t3.addEventListener(MouseEvent.MOUSE_DOWN, tDown);
t3.addEventListener(MouseEvent.MOUSE_UP, tUp);
/*
Функция, которая запускает перетаскивание спрайта по сцене флеш-ролика.
*/
function tDown(event:MouseEvent):void
{
event.target.startDrag(true, new Rectangle(0,0,550,400));
addEventListener(MouseEvent.MOUSE_MOVE,mMove);
}
/*
Функция, которая завершает перетаскивание спрайтов.
*/
function tUp(event:MouseEvent):void
{
event.target.stopDrag();
removeEventListener(MouseEvent.MOUSE_MOVE,mMove);
}
/*
Функция, которая рисует кривую.
*/
function drawCurve():void
{
/*
Сперва стираем ранее созданную графику...
*/
cont.graphics.clear();
/*
задаём стиль линии...
*/
cont.graphics.lineStyle(4,0x666666,1);
/*
указываем точку опускания пера...
*/
cont.graphics.moveTo(t1.x,t1.y);
/*
и, наконец, рисуем саму кривую!
*/
cont.graphics.curveTo(t3.x,t3.y,t2.x,t2.y);
}
/*
Вызываем функцию рисования кривой при изменении положения спрайтов-точек.
*/
function mMove(event:MouseEvent):void
{
drawCurve();
event.updateAfterEvent();
}
/*
Рисуем кривую при запуске программы.
*/
drawCurve();
Что делает эта программа? Программа содержит три спрайта-точки, которые можно свободно перетаскивать по экраны флеш-ролика. Две черные точки - это, так называемые, якорные точки. Красная точка - это контрольная точка. Из двух якорных точек координаты первой устанавливаются с помощью предыдущего вызова таких методов рисования, как moveTo(), lineTo() или curveTo(). Координаты второй якорной точки передаются в метод curveTo(). Каждый раз, когда мы изменяем положение одной из точек на экране, происходит перерисовка кривой. А теперь пробуйте перетаскивать точки и наблюдайте за результатом.
Для большей наглядности я добавил две тонкие красные линии, которые идут от каждой якорной точки в контрольную точку. Эти линии позволяют понять, как контрольная точка влияет на рисование кривой.
Надеюсь, что этот наглядный пример сделает для вас работу метода динамического рисования более понятной. Для закрепления прилагается пара примеров применения метода curveTo().
Код ActionScript 2.0:
/*
Создаём пустой мувик.
*/
_root.createEmptyMovieClip("mc", 0);
/*
Задаём стиль линии.
*/
mc.lineStyle(3, 0x000000);
/*
Создаём точку опускания пера, которая в нашем случае будет и первой якорной точкой.
*/
mc.moveTo(100,100);
/*
Применяем метод curveTo().
*/
mc.curveTo(100,300,450,300);
/*
Меняем стиль линии.
*/
mc.lineStyle(3, 0xff0000);
/*
Рисуем новую кривую.
При этом в качестве первой якорной точки программа возьмёт координаты якорной точки из предыдущего вызова метода curveTo().
*/
mc.curveTo(200,200,450,100);
Код ActionScript 3.0:
/*
Создаём спрайт, внутри которого и будем рисовать.
*/
var sprite:Sprite = new Sprite();
/*
Устанавливаем стиль линии.
*/
sprite.graphics.lineStyle(5,0x000000,1);
/*
Устанавливаем параметры заливки.
*/
sprite.graphics.beginFill(0xff0000,1);
/*
Ставим точку начала рисования.
*/
sprite.graphics.moveTo(200,100);
/*
Рисуем прямую линию.
*/
sprite.graphics.lineTo(350,100);
/*
Рисуем кривую. В качестве первой якорной точки подразумевается точка из предыдущего вызова метода lineTo().
*/
sprite.graphics.curveTo(550,200,350,300);
/*
Рисуем ещё одну прямую линию.
*/
sprite.graphics.lineTo(200,300);
/*
Рисуем кривую.
*/
sprite.graphics.curveTo(0,200,200,100);
/*
Завершаем заливку.
*/
sprite.graphics.endFill();
/*
Добавляем наш спрайт в список отображения.
*/
addChild(sprite);
Рейтинг поста: 
