НОУ ИНТУИТ | Flash MX для профессиональных программистов. Лекция 10: Программное рисование во Flash MX

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 23.12.2005 | Уровень: специалист | Доступ: платный | ВУЗ: Московский физико-технический институт

|

Вам нравится? Нравится 37 студентам

| Поделиться |

Поддержать программу

В References можно прочитать, что оператор curveTo рисует кривую, используя текущий стиль линии, начиная от текущей позиции и заканчивая в точке (xTarget, yTarget) (имена переменных взяты из примера 10.9), используя контрольную точку (xControl, yControl). Что означает эта контрольная точка, разработчики не конкретизируют, оставляя пользователю простор для догадок. Однако, с помощью несложного исследования можно установить, что curveTo изображает кусок параболы, начинающийся в текущей позиции и заканчивающийся в (xTarget, yTarget), такой что касательные в начальной и конечной точках пересекаются в точке (xControl, yControl).

Это так называемая кривая Безье второго порядка.

Кривая Безье представляет собой гладкую кривую, построенную по конечному набору точек на плоскости. Строится она следующим образом.

Для начала рассмотрим построение кривой Безье для трех точек.

Рис. 10.4.

Пусть на плоскости заданы три точки P₀, P₁ и P₂. Для определенного значения параметра $\tau$ от 0 до 1 выберем на отрезке [P₀, P₁] точку $P_{01 \tau}$ , которая делит отрезок в отношении $\tau /(1-\tau)$ , на отрезке [P₁, P₂] - аналогичную точку $P_{12 \tau}$ , и на получившемся отрезке $[P_{01\tau}, P_{12\tau}]$ - точку $P_\tau$ , которая в свою очередь делит отрезок $[P_{01\tau}, P_{12\tau}]$ в отношении $\tau/(1-\tau)$ . Точки $P_\tau$ , полученные таким образом для всех значений $\tau$ от 0 до 1, и составляют кривую Безье второго порядка.

Рис. 10.5.

Нетрудно показать, что кривая $P(\tau)$ проходит через точки P₀ и P₂, касательные к ней в этих точках совпадают с прямыми, на которых лежат отрезки [P₀, P₁] и [P₂, P₁], это кривая второго порядка (парабола), аналитически в векторном виде записывается следующим образом:

$\bar P = \bar P_0 (1 - \tau)^2 + 2 \bar P_1\tau(1 - \tau) + \bar P_2 \tau^2$ , $\tau \in [0,1]$

Способ построения кривой Безье для произвольного числа точек показан на рис. 10.6 (на примере шести точек P₀ - P₅ ). Так же, как и в рассмотренном выше случае трех точек, для каждого значения параметра $\tau$ от 0 до 1 найдем соответствующую этому значению точку кривой (рис. 10.6а). Для этого сначала разделим каждый отрезок ломаной P₀ - P₅ в отношении $\tau/(1-\tau)$ (рис. 10.6б). Далее, получившиеся пять точек ( $P_{01\tau}$ , $P_{12\tau}$ , и т.д., см. рис.) соединим отрезками, и каждый из них в свою очередь разделим в отношении $\tau/(1-\tau)$ (рис. 10.6в). Будем повторять эту процедуру до тех пор, пока у нас не останется один отрезок $P_{04\tau} - P_{15\tau}$ (рис. 10.6г). Точка, которая делит этот отрезок в отношении $\tau/(1-\tau)$ , и будет искомой точкой $P_\tau$ . Если изменять значения $\tau$ от 0 до 1 и для каждого находить точку таким образом, то мы получим кривую Безье n -го порядка, где n на 1 меньше числа точек (в данном случае порядок кривой будет пятый).

Рис. 10.6a.

Рис. 10.6b.

Рис. 10.6c.

Рис. 10.6d.

Можно доказать, что в аналитическом виде формула кривой Безье n -го порядка выглядит так:

Эта кривая представляет собой как бы сглаженный вариант ломаной P₀...P_n. Можно выделить несколько полезных свойств кривых Безье. Так, эта кривая всегда проходит через точки P₀ и P_n. Касательные к кривой в этих точках совпадают с направлениями отрезков [P₀, P₁] и [P_n-1, P_n] соответственно. Касательная в произвольной точке $P_\tau$ совпадает с направлением отрезка $[P_{0(n-1)\tau}, P_{1n\tau}]$ . Часть кривой между точками P₀ и $P_\tau$ так же представляет собой кривую Безье n -ного порядка, построенную на точках $[P_0, P_{01\tau}...P_{0(n-1)\tau}, P_\tau]$ . Аналогично, ост авшаяся часть кривой - между точками $P_\tau$ и P_n - тоже является кривой Безье n -ного порядка, построенной на точках $[P_\tau, P_{1n \tau}...P_{(n-1)n}\tau, P_n]$ .

На практике кривые Безье применяют для упрощения построения произвольных кривых, даже не заданных аналитически. Чаще всего для этого используют кривые Безье третьего порядка, так называемые кубические сплайны. Они достаточно просты для вычислений, но с их помощью уже можно с хорошей точностью приблизить любую гладкую кривую. Благодаря этому кривые Безье третьего порядка получили широкое распространение в компьютерной графике: их можно встретить практически в любом редакторе, позволяющем работать с векторными изображениями. В том числе в редакторе Flash MX.

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

Уравнение кривой Безье третьего порядка выглядит так:

$\bar P = \bar P_0(1 - \tau)^3 + 3\bar P_1(1 - \tau)^2\tau + 3\bar P_2(1 - \tau)\tau^2 + \bar P_3\tau^3$ ,

где - точка на кривой, P_0 и P_3 - опорные точки, P_1 и P_2 - контрольные точки, $\tau$ - параметр, пробегающий значения от 0 до 1. Это уравнение можно также переписать в виде

$\bar P = \bar P_0 + 3(\bar P_1 - \bar P_0)\tau + 3(\bar P_2 - 2\bar P_1 + \bar P_0)\tau^2 + (\bar P_3 - 3\bar P_2 + 3\bar P_1 - \bar P_0)\tau ^3$

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

При добавлении новой точки кривая разбивается на две, но в первый момент это никак не влияет на ее форму (рис. 10.7 Б). Однако получившиеся кривые можно редактировать независимо, и после редактирования они уже не могут быть преобразованы обратно в одну кривую Безье (рис. 10.7 Б и В). Тем не менее, кривая в этом случае может остаться непрерывной и даже гладкой - если редактировать контрольные точки так, что на стыке двух участков опорная точка и две контрольные оставались на одной прямой (см. рис. 10.7 В), - она и будет касательной к кривой в данной точке (гладкость C¹ ).

Рис. 10.7. Редактирование кривой при помощи кубических сплайнов (Photoshop)

А) Кривая Безье третьего порядка

Б) Та же кривая, разбитая на две части. Обратите внимание, что контрольные точки на концах исходной кривой стали ближе к соответствующим опорным, хотя вид кривой не изменился - дело в том, что они управляют уже не целой кривой, а только ее частью

В) Редактирование отдельных частей кривой с сохранением гладкости в точке соединения

Г) Редактирование двух частей кривой независимо друг от друга.

Кривые, нарисованные в редакторе Flash MX, тоже представляют собой набор кубических сплайнов. Опорные точки в них расставляются автоматически (рис. 10.8).

Рис. 10.8. Примеры кривых, нарисованных в редакторе Flash MX, с опорными точками

Как уже отмечалось, кубическими сплайнами можно аппроксимировать кривую любой сложности. Однако, напомним, что оператор curveTo рисует кривую Безье второго порядка. Эта кривая гораздо проще, чем кубический сплайн, и для аппроксимации произвольных линий таких кривых понадобилось бы больше.

Так, например, для построения окружности (или эллипса) с хорошей точностью достаточно четырех кубических сплайнов, а квадратичных надо как минимум 10-12 (см. рис. 10.9).

Рис. 10.9. Аппроксимация эллипса при помощи кубического и квадратичного сплайнов

На рисунке 10.9 эллипс - светло-серая кривая - практически невозможно отличить от кубического сплайна (тонкая черная кривая), построенного по точкам A, $A_ \zeta$ , $B_\xi$ и B. Контрольные точки $A_\zeta$ и $B_\xi$ подбирались так, чтобы в точках A и B совпадали радиусы кривизны сплайна и исходной кривой (эллипса). Радиус кривизны кривой вычисляется по формуле