Введение
SVG, сокращение от Scalable Vector Graphics, представляет собой язык на основе XML для описания объектов и сцен. Элементы SVG могут генерировать события и могут быть написаны с помощью JavaScript. SVG имеет несколько встроенных типов примитивов, таких как круги и прямоугольники, а также возможность отображать текст. Хотя SVG как технология не нова, HTML5 теперь позволяет встраивать объекты SVG в страницу напрямую без использования тегов <object> или <embed> , приводя их в соответствие с тем, что в настоящее время доступно на холсте. Raphaël.js — это библиотека JavaScript, которая позволяет программно создавать сцены SVG. Он использует унифицированный API для создания сцен SVG, где он поддерживается, или VML (язык векторного моделирования), где он есть сейчас, а именно версий Internet Explorer до IE9.
Рисуем свою первую сцену
Начнем с рисования простой сцены с Рафаэлем. Мы начинаем рисовать сцену с создания экземпляра объекта Рафаэля. В этом случае я использовал конструктор, который вставляет его в заданный элемент HTML с заданной шириной и высотой, но вы также можете попросить Рафаэля добавить объект в DOM (объектную модель документа). Затем я создал прямоугольник, предоставив желаемым позициям x и y ширину и высоту. Далее я создал круг, задав нужные координаты и радиус. Наконец, я использовал атрибутную функцию (attr), чтобы назначить цвета объектам.
Каждому объекту SVG могут быть назначены атрибуты, такие как цвет, вращение, цвет и размер обводки и т. д. Подробный список назначаемых атрибутов можно найти здесь .
var paper = Raphael("sample-1", 200, 75);
var rect = paper.rect(10, 10, 50, 50);
var circle = paper.circle(110, 35, 25);
rect.attr({fill: "green"});
circle.attr({fill: "blue"});
Рисование сложных фигур с помощью контуров
Путь — это серия инструкций, используемых средством рендеринга для создания объектов. Рисование контура похоже на рисование ручкой на огромном листе миллиметровой бумаги. Вы можете дать указание ручке подняться над бумагой и переместиться в другое положение (переместить), нарисовать линию (линия к) или нарисовать кривую (дуга к). Пути позволяют SVG создавать объекты с одинаковым уровнем детализации независимо от масштаба. Когда вы даете команду «нарисовать кривую», SVG учитывает исходный и окончательный желаемый размер кривой (после масштабирования), он математически вычисляет промежуточные точки для визуализации гладкой кривой.
В коде и на рисунке ниже показаны прямоугольник и замкнутая кривая, нарисованная путями. Буква M, за которой следуют координаты, перемещает перо в эту позицию, буква L, за которой следует пара координат, рисует линию от текущей позиции до этой позиции. s рисует гладкую кривую Безье с заданной контрольной точкой и конечной точкой с относительными координатами. Z закрывает путь. Обычно при использовании прописной буквы команда выдает абсолютные координаты, а строчной — относительные координаты. M/m и Z/z соответственно выдают одну и ту же команду для верхнего и нижнего регистра. Посмотреть список всех инструкций пути можно здесь .
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");
rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
Рисование текста
Иметь иллюстрации без возможности рисовать текст было бы очень скучно, к счастью, Рафаэль предлагает два метода рисования текста. Первый метод, text, принимает координаты ax и y, а также строку для рисования. Текстовый метод не дает вам особого контроля над шрифтом или другими эффектами. Он рисует шрифт по умолчанию с размером по умолчанию.
Второй метод, print, рисует текст как набор путей. В результате мы можем изменять отдельные буквы. В приведенном ниже примере мы покрасили цифру 5 оранжевой заливкой, покрасили «КАМЕНЬ» голубоватой заливкой и сделали обводку толще, чтобы имитировать жирный текст. Мы сделали это, используя собственный шрифт размером 40 пунктов.
var paper = Raphael("sample-4", 600, 100);
var t = paper.text(50, 10, "HTML5ROCKS");
var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);
letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}
Шрифта Vegur нет в Raphael, да и вообще никакого шрифта нет. Кроме того, большинство шрифтов используют формат TrueType(TTF) или OpenType(OTF). Чтобы превратить эти форматы во что-то, что сможет использовать Рафаэль, нам нужно преобразовать их с помощью инструмента под названием Cufon . Cufon позволяет экспортировать различные стили шрифта данного шрифта (обычный, полужирный, курсив, полужирный курсив и т. д.) для использования с Raphaël. Подробное описание Cufon выходит за рамки данного руководства. Проверьте ссылку выше для получения более подробной информации. Отличным источником свободных шрифтов для ваших приложений является Каталог шрифтов Google .
События
Элементы SVG могут напрямую подписываться на все традиционные события, связанные с мышью: click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup и hover . Raphaël предоставляет возможность добавлять свои собственные методы как к холсту, так и к отдельным элементам, поэтому теоретически ничто не мешает вам добавлять жесты для мобильных браузеров.
Фрагмент ниже связывает функцию для поворота данной буквы на 45 градусов «ROCKS» при нажатии на нее.
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
letters[i].click(function(evt) {
this.rotate(45);
});
}
SVG против холста
Учитывая, что оба метода рисуют объекты на экране, часто не сразу понятно, почему вам следует использовать один вместо другого. Эти две среды имеют совершенно разные подходы. Canvas — это API немедленного режима, очень похожий на рисование мелками. Вы можете очистить или уничтожить часть рисунка, но по умолчанию вы не можете вернуть или изменить предыдущий штрих. Холст также является растровым растровым изображением, поэтому он очень подвержен пикселизации при масштабировании изображений. С другой стороны, SVG, как упоминалось ранее, может работать с несколькими разрешениями с одинаковым уровнем детализации и может быть написан по сценарию.
Использовать ли SVG или Canvas для программирования игр довольно просто. Помимо обычных ограничений, связанных с тем, планируете ли вы развертывание на настольных компьютерах или мобильных устройствах, на самом деле все сводится к количеству спрайтов. SVG подходит для того, что я бы назвал играми с низкой точностью. Я описываю их как игры, в которых одновременное перемещение объектов, а также удаление и создание спрайтов ограничено. В эту категорию попадают многие настольные игры, такие как шахматы, шашки или морской бой, а также карточные игры, такие как блэкджек, покер и червы. Еще одна объединяющая нить заключается в том, что во многих из этих игр игроку нужно будет перемещать произвольный объект, а возможности сценариев SVG упрощают выбор объекта.
Инструменты разработки для SVG
Использование SVG вовсе не означает, что вам придется создавать пути вручную. Существует несколько инструментов, как с открытым исходным кодом, так и коммерческих, которые позволяют экспортировать в SVG. Два инструмента, которые я широко использовал и которые настоятельно рекомендую, — это Inkscape и svg-edit .
SVG-редактировать
svg-edit — это браузерный редактор SVG, написанный на JavaScript. Он предоставляет ограниченный пользовательский интерфейс, напоминающий GIMP или MS Paint. Если уровень детализации не был относительно низким, я в основном использовал svg-edit для настройки рисунков SVG, а не для их создания. svg-edit позволяет создавать объекты графически или с помощью кода SVG.
Инкскейп
Inkscape — кроссплатформенный полноценный редактор векторной графики, аналогичный CorelDraw, Adobe Illustrator и Xara. Inkscape извлекает выгоду из активного сообщества плагинов и развитой кодовой базы. Предшественник Inkscape, от которого произошел ответвление Inkscape, был разработан в 1999 году. Inkscape — мое любимое приложение для векторных и растровых ресурсов.
Небольшое отступление
SVG не поддерживается в Windows в версиях Internet Explorer до IE9. IE использует формат векторной графики под названием VML (язык векторной разметки), который обеспечивает большую часть тех же функций, что и SVG. Рафаэль может создавать сцены, использующие SVG или VML, где это поддерживается. Использование Raphaël — это простой способ обеспечить кроссплатформенную поддержку.
Рекомендации
- Рапаэль.js: http://raphaeljs.com
- Документация Рафаэля: http://raphaeljs.com/reference.html .