В моих предыдущих статьях SVG мы исследовали элемент траектории и квадратичные кривые Безье с одной контрольной точкой. В этой статье мы рассмотрим второй из трех типов: кубическая кривая Безье.
Что такое кубические кривые Безье?
Вы, вероятно, встречали кубические Безье в настольных издательских и графических пакетах. Итак, давайте совершим еще одну поездку в WolframMathWorld, чтобы взглянуть на уравнения. Ugghh.
В последнем посте мы увидели, как квадратичные Безье имеют начальную точку (P 0 ), конечную точку (P 2 ) и одну контрольную точку (P 1 ), которая определяет кривизну. Кривые кубического Безье также имеют начальную (P 0 ) и конечную точки (P 3 ), но есть две контрольные точки — одна для каждого конца линии (P 1 и P 2 ). Википедия иллюстрирует, как они генерируются .
Безье предоставляет гораздо больше вариантов кривой. С двумя контрольными точками мы можем генерировать кривые, которые изменяют направление или оборачиваются вокруг себя.
Пазлы Путь
Квадратичные кривые Безье определяются с помощью директивы ‘C’ в атрибуте пути ‘d’:
<path d="M100,250 C100,100 400,100 400,250" />
Начальная директива M перемещает ручку к первой точке (100,250). После «С» идут три координаты; начальная контрольная точка (100 100), конечная контрольная точка (400 100) и конечная точка, к которой мы рисуем (400 250).
Вы также можете использовать строчную букву «с» для обозначения относительных, а не абсолютных координат. Следующая кривая идентична:
<path d="M100,250 c0,-150 300,-150 300,0" />
Опять же, есть сокращенные директивы «S» и «S». Они принимают две координаты; конечная точка и связанная с ней контрольная точка. Предполагается, что первая контрольная точка совпадает с конечной контрольной точкой предыдущей кривой, например
<path d="M100,250 C100,100 400,100 400,250 S400,400 250,250" />
Это рисует кривую от 100 250 (контрольная точка на 100 100) до 400 250 (контрольная точка на 400 100). Затем строится другая кривая с 400 250 (контрольная точка без изменений при 400 100) до 250 250 (контрольная точка при 400 400).
Как обычно, строчная директива ‘s’ обозначает относительные, а не абсолютные координаты.
К счастью, вам не нужно слишком беспокоиться обо всех запутанных координатах; Посетите интерактивную страницу демонстрации кривой кубического Безье в SVG — она работает во всех браузерах, кроме IE8 и ниже, которые не поддерживают SVG.
Перетащите контрольные точки или любой конец кривой, и код будет создан для вас. Нажмите на кривую, чтобы переключить эффект заливки.
В следующем посте SVG мы закончим нашу серию элементов пути эллиптическими дугами.