Raphael is a JavaScript library for drawing vector graphics. It allows creating graphical elements like circles, ellipses, images, paths, rectangles and text. These elements can be animated, have their attributes changed, and respond to events. The library works by using either Canvas, SVG or VML depending on browser support. It has a simple API that is similar across supported technologies. Raphael is lightweight at only 16kb and continues to be updated with new features.

1. Raphaël
JavaScript Library for Vector Graphics
Dmitry Baranovskiy
WSG meeting
11 March 2009

2. Cool

4. Cool Cool Cool WTF

6. Raphaël

8. What is it for?

9. Demo

10. What is it?

11. JavaScript

12. window.onload = function () {
var hldr = document.getElementById(quot;holderquot;);
var text = hldr.getElementsByTagName(quot;pquot;)[0].innerHTML;
hldr.innerHTML = quot;quot;;
var R = Raphael(quot;holderquot;, 640, 480),
txt = R.set(),
attr = {quot;fontquot;: '50px quot;Georgiaquot;', opacity: 0.5};
txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#0f0quot;));
txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#f00quot;));
txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#00fquot;));
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;
};
};

13. window.onload = function () {
var hldr = document.getElementById(quot;holderquot;);
var text = hldr.getElementsByTagName(quot;pquot;)[0].innerHTML;
hldr.innerHTML = quot;quot;;
var R = Raphael(quot;holderquot;, 640, 480)
480),
txt = R.set(),
attr = {quot;fontquot;: '50px quot;Georgiaquot;', opacity: 0.5};
txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#0f0quot;));
txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#f00quot;));
txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#00fquot;));
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;
};
};

14. How does it work?

15. Canvas SVG VML

16. Canvas SVG VML
pixels DOM DOM

17. SVG VML

18. DOM?

19. SVG VML

20. API

21. circle
ellipse
image
path
rect
text

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

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

24. 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

25. 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

29. Element.node

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

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

32. 16 Kb

37. 0.6.4

38. 0.7

39. gRaphaël

40. Yet Another Demo

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

42. Using Raphaël could amaze your colleagues

43. http://RaphaelJS.com/

44. Thank You