Библиотека 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

Пожалуйста, при копировании материала ставьте активную ссылку на статью.

Все комментарии (1):

rixaman 2011.11.08 17:27:51

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

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

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