Raphaël—векторный JavaScript движек

Когда я первый раз познакомился с библиотекой Raphaël - удивлению не было предела. Как так случилось, что о таком мощнейшем инструменте я никогда не слышал? Не прошло и 15 минут, как первый эксперимент увенчался успехом и мною было принято окончательное решение - любая задача, связанная с векторной графикой в браузере всегда будет реализована только при помощи этого замечательного инструмента. Итак, пришло время и вам познакомится с библиотекой Raphaël.

Raphaël - это маленькая JavaScript-библиотека (размер ее минимизированной версии всего 60 кБ), которая многократно упростит вам работу с векторной графикой в браузере. Если вы например желаете получить возможность создавать персональные графики, редактировать изображения и манипулировать ими прямо в браузере - достичь этого с легкостью можно при помощи данной библиотеки.
Raphaël использует SVG и VML в основе создания графики. Поэтому каждый создаваемый графический объект имеет также свою DOM-ноду, следовательно можно каждому объекту назначить JavaScript-обработчики событий или изменить их позже. В целом целью Raphaël является предоставление адаптера, который сделает работу с векторной графикой простой и кроссбраузерной.
На данный момент Raphaël поддерживает Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ и Internet Explorer 6.0+

Пришло время опробовать Raphaël.
1) Качаем библиотеку:
http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js
2) Подключаем библиотеку:

<script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>

3) Собственно код примера:

<script type="text/javascript">
  var paper = Raphael(10, 50, 320, 200);
  var circle = paper.circle(50, 40, 10);
  circle.attr("fill", "#f00");
  circle.attr("stroke", "#fff");
</script>

4) Запускаем созданный файл в браузере - все работает!

Этот пример достаточно прост, но как нельзя лучше отображает легкость и понимание в использовании библиотеки

Офф. сайт - http://raphaeljs.com/

Комментарии

Аватар пользователя vadim

Графики для вывода статистики весьма часто нужны, как правило это решается через генерацию картинок "на лету" или при помощи кеширования файлов изображений. Такое представление начисто лишено интерактивности, и если надо вывести объемную информацию по каждой точке графика, приходится или ужимать ее на картинке, или делать сноски и легенды, ну очень неудобные для пользователей... Имеется ли в этой библиотеке некая высокоуровневая заготовка для вывода статистических данных - графиков, гистограмм, круговых диаграмм с элементами интерактива? Например, чтобы при наведении на точку или столбец показывалась какая-то детальная информация по этой координате. Понятно, что на примитивах это построить можно - но вопрос в том, готова ли эта библиотека к использованию на прикладном уровне, или необходимо сперва запрограммировать эти вещи самостоятельно?

Аватар пользователя Fastto

К сожалению, а может и к счастью, эта библиотека служит лишь конструктором для создания подобных инструментов, так как является именно "движком" векторной графики, т.е. скрывает всю системную рутину и позволяет работать с примитивами просто и кроссбраузерно... например - http://raphaeljs.com/analytics.html этот инструмент запрограммирован всего двумя сотнями строками кода - 100 на сам график и 100 на popup-информатор.
Если интересует только создание и управление графиками, то для этого есть специализированные библиотеки, которые кроме этого ничего и не умеют, но предоставляют широчайший спектр возможностей по теме, например одной из лучший я считаю - http://www.highcharts.com/ , демо этой библиотеки можно посмотреть тут - http://www.highcharts.com/demo/

Аватар пользователя vadim

Highcharts довольно странно работает в айпаде - масштабировать там непросто, с третьей попытки только получается, а попасть в некоторые точки графика даже на демке так и не удалось - не показывается подсказка, и все тут... У РафаЁла с этим все в порядке, хотя перемещение окошка на демке и не плавное, но срабатывает надежно. В очередной раз убеждаюсь, что если хочется что-то говоое использовать в проекте, надо бить себя по рукам, брать низкоуровневую либу и оборачивать под свои нужды.

Аватар пользователя Fastto

Мышкой плавное :) Под тачскрин наверное и не рассчитано, как первое, так и второе. Но на рафаеле это исправить минута дела, а Highcharts заточить тяжелее будет, если вообще получится.