Paths. Moveto, lineto, и closepath

Все фигуры, описанные ранее, являются сокращенными записями более общего элемента <path> (путь). Эти сокращения делают код более читабельным и структурированным. Элемент <path> способен создавать фигуры произвольной формы с помощью произвольного числа отрезков и кривых, связанных между собой. Такая фигура может иметь контур и заливку цветом как и обычная фигура. В добавок, эти пути можно использовать для определения усеченной зоны или маски прозрачности.

Все данные для описания элемента <path> содержаться в его атрибуте d (d — data). Данные path состоят из однобуквенных команд, таких как m (moveto) или l (lineto), за которыми следуют координаты для этой команды.

Moveto, lineto и closepath

Любой маршрут должен начинаться с команды moveto. Командная буква — заглавная М, за которой следуют х и у координаты, разделенными запятыми или пробелами. Эта команда устанавливает текущее положение «ручки», которая рисует фигуру.

После чего могут идти одна или несколько команд lineto, обозначающимися заглавной L, за которой также следуют х и у координаты, разделенные запятыми или пробелами. В приведенном ниже примере показано 3 пути. Первый рисует одну линию, второй – прямой угол, третий – два угла по 30 градусов. Когда Вы «берете ручку», используя moveto, Вы начинаете новый под-маршрут. Учтите, что запятые и пробелы используются в качестве разделителей по-разному, но абсолютно законно во всех трех путях.

<g style="stroke: black; fill: none;">
	<!-- линия -->
	<path d="M 10 10 L 100 10" />
	<!-- правый угол -->
	<path d="M 10, 20 L 100, 20 L 100,50" />
	<!-- два тридцатиградусных угла -->
	<path d="M 40 60, L 10 60, L 40 42.68, M 60 60, L 90 60, L 60 42.68" />
</g>

Рассмотрим последний путь более детально:

Заметка

Трудно не заметить, что данные элемента <path> не очень похожи на типичные XML атрибуты. Так как все данные вмещены в один общий атрибут, а не отдельный элемент для каждой точки или линии, фигура занимает меньше памяти когда анализируется DOM структура XML парсером. Такая запись позволяет передавать большие изображения при небольшой пропускной способности.

Если есть желание нарисовать с помощью path прямоугольник, то это можно сделать двумя способами: нарисовать четыре линии или нарисовать три и вызвать команду closepath, обозначенную Z, чтобы нарисовать прямую линию в начальную точку под-маршрута. Как это выглядит в коде показано в следующем примере:

<g style="stroke: black; fill: none;">
	<!-- прямоугольник из 4-х линий -->
	<path d="M 10 10, L 40 10, L 40 30, L 10 30, L 10 10" />
	<!-- прямоугольник с closepath -->
	<path d="M 60 10, L 90 10, L 90 30, L 60 30, Z" />
	<!-- два треугольника -->
	<path d="M 40 60, L 10 60, L 40 42.68, Z M 60 60, L 90 60, L 60 42.68, Z" />
</g>

Последний путь разберем детальней:

Относительные moveto и lineto

Команды, рассмотренные выше, были представлены заглавными буквами, а координаты считались абсолютными. Если Вы используете строчные буквы в качестве команд, координаты воспринимаются как относительные по отношению к текущему положению ручки. Таким образом, представленные ниже маршруты являются эквивалентными:

<path d="M 10 10 L 20 10 L 20 30 M 40 40 L 55 35" style="stroke: black;" />
<path d="M 10 10 l 10 0 l 0 20 m 20 10 l 15 -5" style="stroke: black;" />

Если начать маршрут со строчной m (moveto), координаты будут абсолютными, так как нет предыдущего положения ручки, от которого рассчитывать относительное положение. Все команды в этой главе могут быть заданы как заглавными, так и строчными буквами. Координаты команд, написанные заглавными буквами, являются абсолютными, а команды, написанные строчными буквами — относительными. Команда closepath, которая не имеет координат, имеет одинаковый эффект как при написании заглавными, так и строчными буквами.

Куда дальше

• следующая — Сокращение путей
• предыдущая — Трансформации skewX и skewY
• содержание