Категория: Статьи о графике -> Векторная графика (SVG)
Язык разметки SVG (в связке с SMIL) не является чем-то сложным. Однако, так как это язык разметки, а не язык программирования, он не умеет считать числа и перехватывать события. Чтобы рассчитать сложные траектории полета отдельнх фигур или добавить интерактивности рисунку, приходится скрещивать JavaScript и SVG, из-за некоторых нюансов это не очень-то просто.
Библиотека Raphael, написанная Дмитрием Барановским, превращает процесс создания динамических векторных рисунков на веб-странице в сказку. Но простота - не главное достоинство библиотеки. Гораздо важнее то, что Raphael представляет из себя общий программный интерфейс сразу для двух технологий с разным синтаксисом - SVG и VML. К сожалению, самый популярный на сегодня браузер Internet Explorer не поддерживает SVG (до 9 версии), работает только с альтернативной технологией - VML. Таким образом, Raphael позволяет разработчикам с минимальными трудозатратами "на лету" создать картинку для браузеров Firefox 3.0+, Safari 3.0+, Opera 9.5+ и Internet Explorer 6.0+.
Онлайн редактор Графинга использует именно эту библиотеку.
Разобраться с библиотекой совсем несложно, на сайте присутствует компактная и понятная англоязычная документация.
Вот лишь самый простой пример. Круг, нажатие на который вызывает непредсказуемые метаморфозы этого самого круга:
<html> <head> <title>Демонстрация работы Raphael</title> <!-- Подключаем скачанную библиотеку --> <script type="text/javascript" src="raphael.js"></script> <script type="text/javascript">
var c = false; //Функция рисует картинку после загрузки страницы //body onload="draw()" function draw() { //Холст - div "notepad" var paper = Raphael(document.getElementById("notepad"), 350, 350); //Создаем кружок c = paper.circle(50, 50, 40); //Присваиваем атрибуты (заливка цветом, рамка, прозрачность) c.attr({fill: "#f00", stroke: "#000", opacity: 0.5}); //Вешаем событие - нажатие ЛКМ c.click(function() { cx = Math.random()*300; cy = Math.random()*300; cr = Math.random()*80; //По клику будет происходить анимация c.animate({'cx': cx, 'cy': cy, 'r': cr}, 1000); }); } </script> </head>
<body onload="draw()"> <!-- Создаем холст --> <div id="notepad" style="width: 350px; height: 350px;">
</div> </body> </html>
Вот так это выглядит внутри страницы (кликните по кругу). И никакого флеша!
Все комментарии (6):
Никак не могу сделать правильную отрисовку при увеличении страницы в браузере. (Ctrl + Колесо мыши)
Не подскажите можно ли использовать эту библиотеку в коммерческих целях?
Anna, можно. Почитайте про MIT лицензию.
Я в восторге от вашего сайта!
Долго искал такую инфу. Спасибо за сайт!
P.S. ... и Барановскому спасибо за компанию;)
Научите - как мышкой, пальцем - рисовать на страничке?
Ваш комментарий