Опубликован: 07.11.2007 | Доступ: свободный | Студентов: 1482 / 125 | Оценка: 4.29 / 4.14 | Длительность: 25:09:00
Специальности: Программист
Лекция 3:

Элемент Path

< Лекция 2 || Лекция 3: 12345 || Лекция 4 >
Аннотация: Объект Path. Линии и формы. Кривые Безье третьего порядка (Cubic Bezier Curve). Кривые Безье второго порядка (Quadratic Bezier Curves). Эллиптические кривые (Elliptical Curves). Экспорт графики и объект Path.

Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь.

Объект Path

Объект Path позволяет создавать фигуры, к которым могут быть применены все атрибуты оформления– заливка, градиент, штриховка. Он может представлять замкнутые фигуры – такие как полигон, а также разомкнутые – такие как линия.

Фигура, образуемая объектом Path, состоит из отрезков прямых или дуг, которые строятся последовательно, от точки к точке. Для этого используются следующие команды: moveTo ( M ) (установить опорную точку), lineTo ( L ) (провести линию), horizontalLineTo ( H ) (провести горизонтальную линию), verticalLineTo ( V ) (провести вертикальную линию) and closePath ( Z ) (завершить построение объекта Path ), cubic bezier curve ( C,S ) (провести кубическую кривую Безье) , quadratic bezier curve ( Q,T ) (провести квадратичную кривую Безье), and elliptical arc ( A ) (провести эллиптическую кривую).

Координаты объекта задаются следующим образом:

<path d="M15,15 L185,15 Z"/>

Здесь dатрибут, определяющий Path. Далее устанавливается опорная точка – M 15,15. От этой опорной точки проводится линия к точке с координатами 185, 15. Команда Z завершает рисование объекта – при этом происходит возврат к опорной точке.

Различают абсолютные и относительные команды. При работе с абсолютными командами все координаты задаются в системе рисунка, т.е начало отсчета располагается в верхнем левом углу документа. (Рис. 3.1, А).

Абсолютная (А) и относительная команда (Б)

Рис. 3.1. Абсолютная (А) и относительная команда (Б)

Соответствующие координаты называются абсолютными. При проведении линии L 185,15 происходит перемещение в точку, лежащую правее опорной точки на 170 пикселей (рис. 3.1, Б). Ординаты у них равные. Следовательно, можно рассматривать опорную точку в качестве точки начала отсчета и записывать перемещение так:

<path d="M15,15 l170,0 z"/>

Это относительная запись команды – ее название ( lineTo ) указывается строчной буквой. Если фигура состоит из нескольких точек, то при относительной форме записи каждая предыдущая точка становится точкой отсчета для последующей команды. Соответствующие этому случаю координаты называются относительными.

Для атрибута d справедливы следующие правила:

  • Пробелы могут быть опущены:
    <path d="M15,15L185,15Z">
  • Запятые, отделяющие пары координат, могут быть опущены:
    <path d="M15 15 L 185 15 Z">
  • Повторяющиеся команды могут быть опущены:

    <path d="M15,15 L185,15 185,85 15,85 Z"> – эквивалентная запись: <path d="M15,15 L185,15 L185,85 L15,85 Z">

  • Дробные части координат отделяются точкой, причем если число начинается с нуля, он может быть опущен:

    <path d="M0,0 L .5.6 Z"/> – эквивалентная запись: <path d="M0,0 L 0.5, 0.6 Z"/>

Эти правила предназначены для сокращения размера кода. Для удобства визуального восприятия, однако, мы далее будем применять самую понятную форму записи – с разделением запятыми пар координат и с пробелами:

<path d="M15,15 L185,15 Z"/>

Линии и формы

Группа команд для рисования линий и форм – самая простая группа объекта Path. В этом случае создаваемые линии представляют собой отрезки прямых, заключенных заданными точками. В табл. 3.1 приводится описание команд.

Таблица 3.1. Команды для рисования линий и форм.
Команда Описание Параметры
M/m ( moveTo ) Установка точки отсчета. Следующие команды будут использовать эту точку в качестве опорной Координаты ( x, y ) опорной точки.
L/l ( lineTo ) Рисование линии от текущей точки до заданной. Координаты ( x, y ) заданной точки. Добавляемая точка становится опорной.
H/h ( horizontalLineTo ) Рисование горизонтальной линии от текущей точки до заданной. Координата x заданной точки. Координата y будет равна ординате текущей точки. Добавляемая точка становится опорной.
V/v ( verticalLineTo ) Рисование вертикальной линии от текущей точки до заданной. Координата y заданной точки. Координата x будет равна абсциссе текущей точки. Добавляемая точка становится опорной.
Z/z ( closePath ) Завершение рисования линии от опорной точки. Без параметров.

При работе с большим количеством точек, более удобным представляется использование относительных команд.

Таблица 3.2. Примеры линий и форм.
Код Вид в браузере
3.2.1
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
<desc>
          Пример linesAndShapes.svg
     </desc>
     <path d="M15,15 L185,15 L185,85 L15,85 Z"
style="fill:none; stroke:blue; stroke-width:3"/>
</svg>
Листинг 3.2.1. Пример linesAndShapes.svg
линии и формы
Описание
В начале задается опорная точка M 15,15. От нее проводится линия в точку с координатами L 185,15. Далее добавляются еще две линии – L185,85 и L 15,85. Команда Z завершает объект Path, соединяя отрезком точку 15, 185 с опорной точкой.
Код Вид в браузере
3.2.2
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример linesAndShapes2.svg
     </desc>
     <path d="M15,15 l170,0 L185,85 l-170,0 z"
style="fill:none; stroke:blue; stroke-width:3"/>
</svg>
Листинг 3.2.2. Пример linesAndShapes2.svg
линии и формы
Описание
В начале задается опорная точка M 15,15. От нее проводится линия в точку, с той же самой ординатой и лежащей правее на 170 пикселей при помощи относительной команды l 170, 0. Далее при помощи абсолютной команды L 185,85 добавляется линия. Точка с координатами 185, 85 становится точкой начала отсчета. От нее проводится линия в точку, с той же самой ординатой и лежащей левее на 170 пикселей. Следовательно, теперь команда будет принимать отрицательную абсциссу: l-170, 0 Относительная команда z завершает объект Path, соединяя отрезком последнюю точку с опорной.
Код Вид в браузере
3.2.3
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример linesAndShapes3.svg
     </desc>
     <path d="M15,15 H185 M185,15 V85 M185,85 H15 M15,85 V15"
style="fill:none; stroke:blue; stroke-width:3"/>
</svg>
Листинг 3.2.3. Пример linesAndShapes3.svg
линии и формы
Описание
В начале задается опорная точка M 15,15. От нее проводится горизонтальная линия в точку 185, 15 при помощи команды H 185, причем в качестве ординаты берется соответствующее значение опорной точки. Далее устанавливается новая опорная точка M 185, 15 и от нее проводится вертикальная линия V85, теперь в качестве абсциссы берется соответствующее значение новой опорной точки. Снова добавляется опорная точка M 185,85, проводится горизонтальная линия H15. Наконец, добавляется последняя опорная точка M 15, 85 и вертикальная линия V15 соединяет ее с исходной точкой.
Код Вид в браузере
3.2.4
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример linesAndShapes4.svg
     </desc>
     <path d="M15,15 h170 M185,15 v70 M185,85 h-170 M15,85 v-70"
style="fill:none; stroke:blue; stroke-width:3"/>
</svg>
Листинг 3.2.4. Пример linesAndShapes4.svg
линии и формы
Описание
При использовании относительных команд каждая добавляемая опорная точка становится началом отсчета. В этом примере четыре пары "опорная точка – относительная команда": 1) M15,15 h170 2) M185,15 v70 3) M185,85 h-170 4) M15,85 v-70
Код Вид в браузере
3.2.5
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример linesAndShapes5.svg
     </desc>
     <path d="M100,10  L105.8,27.2 123.8,27.2 109.4,38
                     114.6,55.2 100,45 85.4,55.2 90.6,38
                     76.2,27.2 94.2,27.2"
style="fill:red"/>
</svg>
Листинг 3.2.5. Пример linesAndShapes5.svg
линии и формы
Описание
В начале задается опорная точка M 100, 10. Далее один раз указывается команда L – последующие пары координат по умолчанию относятся к команде этого типа. Исходные координаты взяты из примера polygon5.svg (см. "Основные фигуры SVG – графики" ).
Код Вид в браузере
3.2.6
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример linesAndShapes6.svg
     </desc>
     <path d="M100,10  L121.6,22.5  121.6,47.5
              100,60  78.4,47.52  78.4,22.5 Z
"
style="fill:dodgerblue; stroke:blue; stroke-width:5"/>
</svg>
Листинг 3.2.6. Пример linesAndShapes6.svg
линии и формы
Описание
В начале задается опорная точка M 100, 10. Далее один раз указывается команда L – последующие пары координат по умолчанию относятся к команде этого типа. Для завершения фигуры добавляется команда Z (сравните вид фигуры без этой команды). Исходные координаты взяты из примера polygon6.svg (см. "Основные фигуры SVG – графики" ).
< Лекция 2 || Лекция 3: 12345 || Лекция 4 >
Светлана Ведяева
Светлана Ведяева
Россия, Саратов
Николай Будько
Николай Будько
Молдова, Кишинев