Raphaël
JavaScript Library for Vector Graphics
Dmitry Baranovskiy
WSG 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)
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;
};
};

How does it work?

Canvas SVG VML

Canvas SVG VML
pixels DOM DOM

SVG VML

DOM?

SVG VML

API

circle
ellipse
image
path
rect
text

animate
attr
getBBox
hide
circle insertAfter
ellipse insertBefore
image remove
path rotate
scale
rect
text show
stop
toBack
toFront
translate

animate
attr
getBBox
hide
circle insertAfter
ellipse insertBefore
image remove
path rotate
scale
rect
text show
stop
toBack
toFront
translate

fill
animate
fill-opacity
attr font
getBBox font-family
hide font-size
gradient
circle insertAfter
opacity
ellipse insertBefore
rotation
image remove
scale
path rotate stroke
scale
rect stroke-dasharray
text show stroke-linecap
stroke-linejoin
stop
stroke-miterlimit
toBack
stroke-opacity
toFront stroke-width
translate translation

fill
animate
fill-opacity
attr font cx
getBBox font-family cy
hide font-size
height
gradient
circle insertAfter
path
opacity
ellipse insertBefore
r
rotation
image remove
rx
scale
path rotate stroke ry
scale
rect stroke-dasharray src
text show stroke-linecap
width
stroke-linejoin
stop
x
stroke-miterlimit
toBack
y
stroke-opacity
toFront stroke-width
translate translation

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