вторник, декабря 16, 2008

Кривые Безье. Подбираем движок. AS3

Передо мной стоит прозаичная задача - мини-редактор с использованием кривых Безье. Есть некая фигура, состоящая из кривых. Необходимо ее редактировать, путем изменении положения опорных точек.

Итак, прежде чем обратиться к таким авторитетным проектам как http://bezier.ru/, интересно было бы прогуляться по гуглу и посмотреть, что еще предлагают по этой теме.

Один из первых попавшихся - блог Paul Tondeur и его изыскания на эту тему: Drawing a cubic bezier curve using ActionScript3. Здесь можно ознакомиться с теоретической частью и изучить примерчик.

Дальше, получаем интересную статейку ссылкой с Drawlogic.com на labs.zeh.com.br: The search for the perfect bezier tweening syntax. Поиск решения создания пути перемещения при помощи кривых Безье. Особенно понравился пример с использованием Papervision3D - задается путь движения между фигурами.

Далее: Singularity представляет черезчур заумные классы с кучей примеров: Demos. Статья с описанием: AS 3 Parametric Curve Library.

Еще одна хорошая ссылочка: некий Cartogrammar представляет весьма доступный и очень простой в использовании класс CubicBezier.as. Здесь всего два статических метода, которые отрисовывают кривые разными способами. Кстати, очень даже заслуживает внимания. Пока ходил по ссылкам, натолкнулся на забавную демку как раз с использованием этого класса: AS3 Bezier blobs/metaballs

Интересный набор библиотек на Greensock: TweenLite, TweenMax, TweenFilterLite, TransformManager (AS3), TweenGroup. Не относится к кривым Безье (точнее их использует в некоторых случаях), но заставляет обратить на себя внимание.

Небольшое решение, которое может быть полезным: CurveToArray (AS3 class). На основании трех точек кривой Безье, выдает массив координат точек кривой.

Еще немного русскоязычного: Движение по кривой Безье.

А вот некий Flashgamer советует задвинуть "a couple good resources" и взяться все же за Degrafa. Ввиду "крупности" этого движка, оставим его на десерт.

Поглядим, таки, что нам предлагает наш http://bezier.ru/. Здесь множество документации на русском (что важно), обзорная демка и исходники. Скачать исходники можно при помощи SVN-клиента. - делаем СheckОut. Исходники по большей части представляют собой примеры использования, что конечно радует. В принципе писать тут нечего - сайт полон информации на русском, и если что, здесь же можно написать комментарий и получить ответ от хозяев. Надо просто попробовать.
Создаем проект AS3 в FD, кладем в него примеры, прописываем пути к библиотеке и компилируем. Ошибка: "Bezier.as(1488): col: 12 Error: Недопустимое присваивание переменной, которая определена как константа." Ну что ж делать, бывает. В строке "const limiter : Number = 20;" Меняем "const" на "var" и наслаждаемся демкой.
Кстати, исходный код просто перегружен ASDoc-комментариями (что, безусловно, является достоинством). Однако, ни на сайте, ни на Google Code я не смог найти ASDoc-документации Bezier. Странно...

Перейдем к Degrafa. Скачать ее можно на Google Code, но я, пожалуй, воспользуюсь SVN. Пришлось здорово повозиться, чтобы запустить примеры.
При использовании исходников, я вообще не смог избавиться от ошибок - что я не делал - везде вставала проблема некорректных namespace.
При использовании SWC, пример тоже выдавал кучу ошибок. Загвозка была в том, что в примерах указан namespace xmlns:degrafa="http://www.degrafa.com/2008", а нужно xmlns:degrafa="http://www.degrafa.com/2007".
Вывод по Degrafa - мощная и популярная система, но требует углубленного изучения.

Итак, вывод. Для себя я избрал три варианта:

  1. CubicBezier.as.
  2. Bezier.ru.
  3. Degrafa.

CubicBezier - вполне работоспособный, примитивный движок позволяющий рисовать кривые Безье с различными параметрами. Его можно сразу использовать "как есть", либо с необходимыми модификациями, которые внести совсем не сложно. Предварительного изучения не требует, для моей задачи подходит "на ура".
Bezier - Требует предварительного изучения, зато предоставляет широкий набор возможностей для решения большинства практических задач, связанных с кривыми Безье.
Degrafa - Мощный комплекс, позволяющий создавать графику декларативно, при помощи MXML. Для того, чтобы приступить к решению задачи, придется изрядно почитать документацию, которая имеется в изобилии, в формате ASDoc. За изучение есть смысл взяться, т.к. проект весьма перспективный и популяризирующийся. Однако, как всегда, под конец года времени нет, поэтому придется отложить. Но не надолго - ощутив вкус прелестей Degrafa, уже не хочется от него отказываться.

4 комментария:

Unknown комментирует...

Про http://bezier.ru : Мы просто не закончили проект, он так и висит недоделаный на 1%, а времени добить нет. А осталось-то ерунда - посчитать оппозитные точки пересечения.
Отсюда и отсутствие готовых доков и всякое такое.

Ну и спасибо на добром слове.
удачи.

Unknown комментирует...

Да, так обычно и бывает.
С другой стороны, ASDocи же в порядке - компильнуть да и выложить, хотя бы как есть - изучать по ASDoc на порядок удобнее и привычнее чем по текстам :)

Unknown комментирует...

Так и они не добиты на тот самый 1% :)

Toporik комментирует...

Не свовсем в тему, но... Кто-нибудь может посоветовать FLEXовую рантайм рендерилку SVG формата?