Библиотека Raphael ↓

Категория: Статьи о графике -> Векторная графика (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>
 

3.html

Вот так это выглядит внутри страницы (кликните по кругу). И никакого флеша!

 

Дата: 2010.06.01 в 20:01:23
Пожалуйста, при копировании материала ставьте активную ссылку на статью.


Все комментарии (6):
guest 2012.11.21 16:44:07

Никак не могу сделать правильную отрисовку при увеличении страницы в браузере. (Ctrl + Колесо мыши)

Anna 2013.04.10 15:23:35

Не подскажите можно ли использовать эту библиотеку в коммерческих целях?

pistol 2013.04.11 09:16:14

Anna, можно. Почитайте про MIT лицензию.

rixaman 2011.11.08 18:27:51

Я в восторге от вашего сайта!

MrSkyrise 2012.06.27 19:40:58

Долго искал такую инфу. Спасибо за сайт!
P.S. ... и Барановскому спасибо за компанию;)

user 2012.07.15 20:39:03

Научите - как мышкой, пальцем - рисовать на страничке?


Ваш комментарий

Имя:


Содержание: