Привет, Хабр
В этом коротком очерке хотел бы рассказать о маленькой (по словам авторов) библиотеки на JavaScript — Raphaël. Данная библиотека использует для работы SVG и VML и служит, как не сложно догадаться для облегчения работы с векторная графикой в вебе.
Так же по утверждению создателей работает во всех актуальных на даных момент браузерах, а именно Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. К сожалению обошли создатели внимание вторую лису, хотя сюда по данным лайвинтернета на ней приходится почти 2% пользователей, что вообще немало.
Вообще, на сайте библиотеки предельно понятным языком написано что она для чего она и как она. Но коротко остановимся на этом
Для начала нам необходимо создать канвас объект (его мы привязываем к объекту DOM указывая ширину и высоту, или же указываем только координаты левого верхнего угла будущего объекта)
// Each of the following examples create a canvas that is 320px wide by 200px high
// Canvas is created at the viewport's 10,50 coordinate
<br/>var paper = Raphael(10, 50, 320, 200);
// Canvas is created at the top left corner of the #notepad element (or its top right corner in dir="rtl" elements)
<br/>var paper = Raphael(document.getElementById("notepad"), 320, 200);
// Same as above
<br/>var paper = Raphael("notepad", 320, 200);
* This source code was highlighted with Source Code Highlighter.Далее мы можем создавать любые графические примитивы, вызывая соответствующие методы объекта paper. Название методов одноименны с графическими примитивами которыми мы оперируем в рамках стандарта SVG (это например rect circle lineи т.д.) Вот например так создаем прямоугольник
<br/>var paper = Raphael(document.getElementById("notepad"), 320, 200);
paper.rect(0, 0, 640, 480, 10).attr({fill: "#fff", stroke: "none"});
* This source code was highlighted with Source Code Highlighter.Не будем тут останавливатся на долго, об этом подробнейшим образом написано в документации.
Не маловажным плюсов всего этого хозяйства явлется то, что с любым графическим элементом мы можем свзязать события, подобно тому как связываем их с любым DOM объектом, мне показалось это весьма полезным, учитывая что библиотека некоторое время шла бок о бок с фреймворком jquery, работы с элементами графика становилась практически тривиальной.
Итого:Получаем кроссбраузерное решение вечного спора canvas с VML, возможность работать с элементами графики как с объектами DOM, и хорошую документацию библиотки (не смотря на то, что она на английском языке, все предельно ясно, хотя, думаю, если кто-то у кого с языками получше возьмется перевести — сообщество ему только спасибо скажет). Разработка получается действительно быстрой, вот например на написание этого (просто для примера и собственного изучения) ушло не более получаса.
UPD
<img title="" border=«0» alt="" src=«http://img15.imageshack.us/img15/1651/60319441.png»/ >
А вот векторный дракон (из примеров на сайте) пример из области «вот так мы можем, но никогда так не делайте» браузер долго думал… (картинка-скрин, по клику векторная)
UPD2 В хроме drag&drop работает криво