Динамическое рисование кривых в ActionScript

Продолжаю тему динамического рисования в 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(). Каждый раз, когда мы изменяем положение одной из точек на экране, происходит перерисовка кривой. А теперь пробуйте перетаскивать точки и наблюдайте за результатом.

Загрузить Adobe Flash Player

Для большей наглядности я добавил две тонкие красные линии, которые идут от каждой якорной точки в контрольную точку. Эти линии позволяют понять, как контрольная точка влияет на рисование кривой.

Надеюсь, что этот наглядный пример сделает для вас работу метода динамического рисования более понятной. Для закрепления прилагается пара примеров применения метода 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);

Автор: admin

Дата добавления: 2011-08-13

Просмотров: 5276

Рейтинг поста: +7-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): Печеннье
Дата добавления: 2016-06-20
Отличный урок
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-04-23
Вы, наверно, имеете в виду кубические кривые Безье. Их, вообще-то, не очень рекомендуют использовать, особенно в большом количестве. Но можно использовать и даже довольно просто. Есть, например, класс Cubic Bezier. Источника не помню, но когда-то для себя делал шпаргалку по этому классу - http://edapskov.narod.ru/raznoe/cubicBezier.chm
Комментатор
Комментарий добавил(а): Николай
Дата добавления: 2012-04-23
Спасибо за этот урок.
Вопрос.
Здесь одной точкой (красной) регулируется вид кривой.
В других языках (SVG) могут быть две точки, для регулирования.
Наверное вы с этим знакомы.
Как на as3 создать подобное как на SVG.
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

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

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика