Raphael

4,075 views

Published on

Web Standards Group talk about Raphaël — JavaScript Vector Library http://raphaeljs.com

Published in: Technology, Art & Photos

Raphael

  1. 1. Raphaël JavaScript Library for Vector Graphics Dmitry Baranovskiy WSG meeting 11 March 2009
  2. 2. Cool
  3. 3. Cool Cool Cool WTF
  4. 4. Raphaël
  5. 5. What is it for?
  6. 6. Demo
  7. 7. What is it?
  8. 8. JavaScript
  9. 9. 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; }; };
  10. 10. 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; }; };
  11. 11. How does it work?
  12. 12. Canvas SVG VML
  13. 13. Canvas SVG VML pixels DOM DOM
  14. 14. SVG VML
  15. 15. DOM?
  16. 16. SVG VML
  17. 17. API
  18. 18. circle ellipse image path rect text
  19. 19. animate attr getBBox hide circle insertAfter ellipse insertBefore image remove path rotate scale rect text show stop toBack toFront translate
  20. 20. animate attr getBBox hide circle insertAfter ellipse insertBefore image remove path rotate scale rect text show stop toBack toFront translate
  21. 21. 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
  22. 22. 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
  23. 23. Element.node
  24. 24. Circle.node.onclick = function () {…};
  25. 25. $(Circle.node).click(…);
  26. 26. 16 Kb
  27. 27. 0.6.4
  28. 28. 0.7
  29. 29. gRaphaël
  30. 30. Yet Another Demo
  31. 31. Raphaël could make you stand out of the crowd.
  32. 32. Using Raphaël could amaze your colleagues
  33. 33. http://RaphaelJS.com/
  34. 34. Thank You

×