Масштабируемая векторная графика
[+]
Опубликован: 07.11.2007 | Доступ: свободный | Студентов: 1769 / 347 | Оценка: 4.29 / 4.14 | Длительность: 25:09:00
Тема: Компьютерная графика
Специальности: Программист
Теги: arc, baseline, css, flash, glyph, html, marker, stroke, SVG, sweep, x-axis, анимация, браузеры, графика, паттерн, паттерны, поддержка, радиальный градиент, форматы, цвета, шрифты, элементы
Лекция 3:

Элемент Path
A
|
версия для печати
< Лекция 2 || Лекция 3: 12345 || Лекция 4 >

Рассмотренные примеры 3.8.1 - 3.8.5 позволяют сделать вывод: пара значений large-arc-flag, sweep-flag отвечают за то, какая часть фигуры, формируемая пересечением двух эллипсов, будет видна (рис. 3.9):

Все возможные значения пары large-arc-flag, sweep-flag и формируемая ими кривая. (ArcForm.svg)

Рис. 3.9. Все возможные значения пары large-arc-flag, sweep-flag и формируемая ими кривая. (ArcForm.svg)

Рассмотрим теперь последний "неявный" параметр x-axis-rotation (табл. 3.9)

Таблица 3.9. Примеры эллиптических кривых. Параметр x-axis-rotation.
№ Код Вид в браузере
3.9.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="220" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 3. Элемент Path</title>
     <desc>
          Пример EllipticalCurve6.svg
     </desc>
<!--Поворот объекта Path на 10 градусов-->
<path d="M100,100 A50,25 10 1,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Поворот объекта Path на 20 градусов-->
<path d="M100,100 A50,25 20 1,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Поворот объекта Path на 30 градусов-->
<path d="M100,100 A50,25 30 1,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Поворот объекта Path на 40 градусов-->
<path d="M100,100 A50,25 40 1,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Поворот объекта Path на 50 градусов-->
<path d="M100,100 A50,25 50 1,0 150,125"
stroke-width="3"  stroke="green"  fill="none"/>
<!--Исходный объект Path-->
<path d="M100,100 A50,25 0 1,0 150,125"
stroke-width="3"  stroke="black"  fill="none"/>
<!--Вспомогательные фигуры-->
<circle cx="100" cy="100"  r="4" fill="red"/>
<circle cx="150" cy="125"  r="4" fill="red"/>
<circle cx="100" cy="125"  r="2" fill="black"/>
<rect x ="5" y="5" width="210" height="190" 
      
     stroke="blue" stroke-width="2" fill="none">
</rect>
</svg>
Листинг 3.9.1. Пример EllipticalCurve6.svg
Эллиптические кривые
Описание
В этом примере расположено несколько кривых, отличающихся только параметром x-axis-rotation, который принимает значения 10, 20, 30, 40 и 50 градусов. Заметен поворот всей фигуры, как единого целого, относительно горизонтальной оси против часовой стрелки. При этом сохраняется привязка к опорным точкам.

Экспорт графики и объект Path

Мы закончили рассмотрение объекта Path. Мощные графические пакеты, такие как Corel Draw или Adobe Illustrator содержат развитые средства для работы с кривыми. При экспорте в формат SVG большая часть получаемого кода и представляет собой описание именно этого элемента (рис. 3.1):

Преобразование рисунка в формат SVG в программе Corel Draw (CorelDraw_Plane.svg)

увеличить изображение
Рис. 3.10. Преобразование рисунка в формат SVG в программе Corel Draw (CorelDraw_Plane.svg)

При программном создании сложной кривой бывает трудно расставить контрольные точки. Можно было бы нарисовать кривую в Corel Draw, а затем экспортировать в SVG, но проблема заключается в том, что получаемые таким образом координаты содержат неудобные, дробные значения. Типичный фрагмент кода выглядит так (CorelDraw_Plane.svg):

<clipPath id="id0">
  <path d="M0.00772 27.9351c0,-3.0984 0,-6.1968 0,-9.2952 0,-3.0984 0,-6.1968 0,-9.2952 0,-3.0984 
  0,-6.1968 0,-9.2952 1.80917,0 3.61834,0 5.42751,0 1.80917,0 3.61834,0 5.4275,0 1.80917,0 
  3.61834,0 5.42751,0 1.80916,0 3.61833,0 5.4275,0 0,3.0984 0,6.1968 0,9.2952 0,3.0984 
  0,6.1968 0,9.2952 0,3.0984 0,6.1968 0,9.2952 -1.80917,0 -3.61834,0 -5.4275,0 -1.80917,0 
  -3.61834,0 -5.42751,0 -1.80916,0 -3.61833,0 -5.4275,0 -1.80917,0 -3.61834,0 -5.42751,0z"/>
</clipPath>
3.10.

Программа Sketsa SVG Graphics Editor, с которой мы уже сталкивались в "Введение в SVG" , позволяет более корректно определять координаты создаваемых кривых (рис. 3.11)

Рисование кривой Безье в Sketsa SVG Graphics Editor

увеличить изображение
Рис. 3.11. Рисование кривой Безье в Sketsa SVG Graphics Editor

Нарисованные при помощи инструментов кривые могут быть затем отредактированы непосредственно в режиме кода или вообще в другом внешнем редакторе.

Дальше >>
< Лекция 2 || Лекция 3: 12345 || Лекция 4 >

Вопросы и ответы

вопросов: 0