Raphaël

JavaScript Library for Vector Graphics

Dmitry BaranovskiyWSG meeting

11 March 2009

Cool

Cool Cool Cool WTF

Raphaël

What is it for?

Demo

What is it?

JavaScript

window.onload = function () { var hldr = document.getElementById("holder"); var text = hldr.getElementsByTagName("p")[0].innerHTML; hldr.innerHTML = ""; var R = Raphael("holder", 640, 480), txt = R.set(), attr = {"font": '50px "Georgia"', opacity: 0.5}; txt.push(R.text(320, 240, text).attr("fill", "#0f0")); txt.push(R.text(320, 240, text).attr("fill", "#f00")); txt.push(R.text(320, 240, text).attr("fill", "#00f")); txt.attr(attr); var mouse = null, rot = 0; document.onmousemove = function (e) { if (mouse === null) { mouse = e.pageX; return; } rot += e.pageX - mouse; txt[0].rotate(e.pageX - mouse); txt[1].rotate((e.pageX - mouse) /1.5); txt[2].rotate((e.pageX - mouse) /2); mouse = e.pageX; };};

window.onload = function () { var hldr = document.getElementById("holder"); var text = hldr.getElementsByTagName("p")[0].innerHTML; hldr.innerHTML = ""; var R = Raphael("holder", 640, 480), txt = R.set(), attr = {"font": '50px "Georgia"', opacity: 0.5}; txt.push(R.text(320, 240, text).attr("fill", "#0f0")); txt.push(R.text(320, 240, text).attr("fill", "#f00")); txt.push(R.text(320, 240, text).attr("fill", "#00f")); txt.attr(attr); var mouse = null, rot = 0; document.onmousemove = function (e) { if (mouse === null) { mouse = e.pageX; return; } rot += e.pageX - mouse; txt[0].rotate(e.pageX - mouse); txt[1].rotate((e.pageX - mouse) /1.5); txt[2].rotate((e.pageX - mouse) /2); mouse = e.pageX; };};

Raphael("holder", 640, 480)

How does it work?

Canvas SVG VML

Canvas SVG VML

pixels DOM DOM

SVG VML

DOM?

SVG VML

API

circleellipseimagepathrecttext

circleellipseimagepathrecttext

animateattrgetBBoxhideinsertAfterinsertBeforeremoverotatescaleshowstoptoBacktoFronttranslate

circleellipseimagepathrecttext

animateattrgetBBoxhideinsertAfterinsertBeforeremoverotatescaleshowstoptoBacktoFronttranslate

circleellipseimagepathrecttext

animateattrgetBBoxhideinsertAfterinsertBeforeremoverotatescaleshowstoptoBacktoFronttranslate

fillfill-opacityfontfont-familyfont-sizegradientopacityrotationscalestrokestroke-dasharraystroke-linecapstroke-linejoinstroke-miterlimitstroke-opacitystroke-widthtranslation

circleellipseimagepathrecttext

animateattrgetBBoxhideinsertAfterinsertBeforeremoverotatescaleshowstoptoBacktoFronttranslate

fillfill-opacityfontfont-familyfont-sizegradientopacityrotationscalestrokestroke-dasharraystroke-linecapstroke-linejoinstroke-miterlimitstroke-opacitystroke-widthtranslation

cxcyheightpathrrxrysrcwidthxy

Element.node

Circle.node.onclick = function () {…};

$(Circle.node).click(…);

16 Kb

0.6.4

0.7

gRaphaël

Yet Another Demo

Raphaël could make you stand out of the crowd.

Using Raphaël could amaze your colleagues

http://RaphaelJS.com/

Thank You