Raphaël

2,870 views
2,701 views

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,870
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
51
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Raphaël

  1. 1. RaphaëlWeb Directions South 2010
  2. 2. http://dmitry.baranovskiy.com/
  3. 3. https://peepcode.com/products/raphaeljs
  4. 4. http://raphaeljs.com
  5. 5. Why?
  6. 6. How?
  7. 7. SVG
  8. 8. Raphaël doesn’t use Canvas
  9. 9. Raphaëldoesn’t use Canvas
  10. 10. SVG
  11. 11. VML
  12. 12. JavaScriptSVG VML
  13. 13. SVG VML
  14. 14. 20 Kb
  15. 15. Free
  16. 16. API
  17. 17. Preparation
  18. 18. var paper = Raphael("holder", 800, 600);var paper = Raphael(holder, 800, 600);var paper = Raphael(10, 20, 800, 600);
  19. 19. Primitives
  20. 20. var circle = paper.circle(cx, cy, r);var rect = paper.rect(x, y, width, height, r);var ellipse = paper.ellipse(cx, cy, rx, ry);var image = paper.image(src, x, y, width, height);var text = paper.text(x, y, text);
  21. 21. animate mousemoveanimateAlong mouseoutanimateAlongBack mouseoveranimateWith mouseupattr onAnimationclick removeclone rotatedblclick scalegetBBox showhide stophover toBackinsertAfter toFrontinsertBefore translatemousedown
  22. 22. animate mousemoveanimateAlong mouseoutanimateAlongBack mouseoveranimateWith mouseupattr onAnimationclick removeclone rotatedblclick scalegetBBox showhide stophover toBackinsertAfter toFrontinsertBefore translatemousedown
  23. 23. circle.attr({ fill: "#fc0", stroke: "hsb(0.6, 0.7, 0.9)", "stroke-width": 5, "stroke-opacity": 0.5, cx: 50});var fill = circle.attr("fill");circle.animate({ cx: 100, cy: 100}, 1000, function () { alert("Animation is finished");});
  24. 24. c.animate({cx: 230, cy: 130}, 2000);
  25. 25. c.animate({cx: 230, cy: 130}, 2000);
  26. 26. c.animate({cx: 100, cy: 230}, 1000, function () { c.animate({cx: 230, cy: 130}, 1000);});
  27. 27. c.animate({cx: 100, cy: 230}, 1000, function () { c.animate({cx: 230, cy: 130}, 1000);});
  28. 28. c.animate({ "50%": {cx: 100, cy: 230}, "100%": {cx: 230, cy: 130}}, 2000);
  29. 29. c.animate({ "50%": {cx: 100, cy: 230}, "100%": {cx: 230, cy: 130}}, 2000);
  30. 30. c.animate({ "50%": {cx: 100}, "100%": {cx: 230}}, 2000).animate({ "25%": {cy: 30, r: 10}, "50%": {cy: 230, r: 20}, "75%": {cy: 50, r: 10}, "100%": {cy: 130, r: 20}}, 2000);
  31. 31. c.animate({ "50%": {cx: 100}, "100%": {cx: 230}}, 2000).animate({ "25%": {cy: 30, r: 10}, "50%": {cy: 230, r: 20}, "75%": {cy: 50, r: 10}, "100%": {cy: 130, r: 20}}, 2000);
  32. 32. clip-rect href stroke-linejoincursor opacity stroke-miterlimitcx path stroke-opacitycy r stroke-widthfill rotation targetfill-opacity rx textfont ry text-anchorfont-family scale titlefont-size src translationfont-style stroke widthfont-weight stroke-dasharray xheight stroke-linecap y
  33. 33. Paths
  34. 34. var path = paper.path(pathString);
  35. 35. M278.939,132.632l-0.641-0.853l0.183-1.97l-0.975,0.091l-0.92-0.092l-0.506,0.415l-0.526,0.234l-0.541,0.053l-0.939-0.271l-1.049,0.468l-0.813-0.833l-0.938-0.272l-0.851,0.631l-0.67,0.614l-1.083,0.106l-0.904,0.09l-0.108,0.741l0.288,1.068l0.722-0.073l-0.651,0.795l-0.129,0.559l-1.049,0.47l-0.757-0.291l-0.433-0.688l-0.651,0.794l-0.651,0.795l-0.309,0.578l-0.688,0.433l-0.47-1.049l-0.069-0.723l-0.435-0.688l-0.415-0.507l-0.631-0.85l-1.121-0.254l-1.643-0.021l-0.577-0.309l-0.761-0.29l-0.722,0.071l-0.235-0.524l-0.903,0.089l-1.41,0.504l-1.3-0.237l-1.321-0.416l-0.541,0.053L250,132.249l-1.104-0.073l-0.073,1.102l-0.722,0.072l0.053,0.543l-0.869,0.449l-53.113-0.052l-0.002,0.043v45.292l0.08-0.038l1.109-0.168l1.834,0.86l1.024-0.723l1.748,0.305l2.12,0.248l1.73,1.44l0.492,2.009l1.092,0.971l0.045-0.953l1.055-0.539l0.98,0.232l1.721,0.119l1.008,0.413l0.604,2.748l1.444,2.054l1.138,0.018l1.619,0.701l1.973,1.783l0.379,1.268l1.277,0.943l1.619,0.701l1.295-0.195l-0.223-1.481l0.471-0.638l0.741-0.11l0.823,0.444l1.85-0.28l1.434,0.729l0.925-0.139l1.223,0.571l1.164,0.204l0.658-0.666l0.896-0.327l1.037,0.603l1.961,0.461l1.451-0.408l1.083-0.354l0.74-0.111l0.711-0.295l0.899-0.326l1.433,0.73l-0.204,1.168l0.566,1.235l0.722,1.028l0.354,1.082l-0.178,1.349l8.182,4.065l1.721,0.121l0.873,0.643h0.513l-0.213,0.64l0.112-0.336l0.227,0.167l0.939-0.471l-0.213-1.704l0.427-0.212h0.425l-0.425-1.065l-0.853-0.213l0.426-0.853l-0.426-1.064l0.426,0.214l0.427-1.491l0.851-3.406l-0.213-2.131l0.426-1.277h-0.426l1.065-0.852l-0.64-0.853l0.854,0.213l1.703-4.046l1.49-0.428l-0.641-1.275l0.641-0.214v0.853l0.424-0.214l-0.424-1.276l-0.426,0.213l0.213-0.426l-0.854-0.213l1.49-0.64l0.427-1.491l-0.427-0.639l0.64-0.215v-1.489l1.703-1.703l-0.638-0.214l1.063-0.213l-1.276-0.426l1.489-0.213l0.214-1.064l-0.64,0.426l-0.427-0.426l0.64,0.213l-0.213-0.639l0.64,0.426l0.213-1.704v-0.212l-0.427,0.425v-0.639l-0.213,0.214l-0.213-0.641l0.64,0.427l0.213-1.064v0.853l0.852-0.426l0.214-1.064l-0.427-0.427h0.854l0.637-1.703l-0.637,0.853l-0.214-0.853h0.638v-0.853l0.213,0.853l0.854-1.491l-0.213-0.426h0.427v0.64l2.556-1.491l-0.853-0.213l-0.853,0.639l-0.213-0.213l0.426-0.426l-0.213-0.426l0.853,0.426l0.638-0.426l0.215,0.426l0.853-1.277l1.489-0.853l0.214-1.702l-0.64-0.215v0.428l-0.852-0.428h1.064l0.213-1.49l1.49-1.277l1.918-6.176l-0.213-4.26l1.489-3.834l0.213-0.639l0.64-3.62l-0.64-0.426l0.64,0.213l-0.213-0.853l1.703-3.193h-0.426l0.426-0.214L278.939,132.632zM261.268,143.072h-0.215l-0.213-0.639l0.641-0.214L261.268,143.072z
  36. 36. M278.939,132.632l-0.641-0.853l0.183-1.97l-0.975,0.091l-0.92-0.092l-0.506,0.415l-0.526,0.234l-0.541,0.053l-0.939-0.271l-1.049,0.468l-0.813-0.833l-0.938-0.272l-0.851,0.631l-0.67,0.614l-1.083,0.106l-0.904,0.09l-0.108,0.741l0.288,1.068l0.722-0.073l-0.651,0.795l-0.129,0.559l-1.049,0.47l-0.757-0.291l-0.433-0.688l-0.651,0.794l-0.651,0.795l-0.309,0.578l-0.688,0.433l-0.47-1.049l-0.069-0.723l-0.435-0.688l-0.415-0.507l-0.631-0.85l-1.121-0.254l-1.643-0.021l-0.577-0.309l-0.761-0.29l-0.722,0.071l-0.235-0.524l-0.903,0.089l-1.41,0.504l-1.3-0.237l-1.321-0.416l-0.541,0.053L250,132.249l-1.104-0.073l-0.073,1.102l-0.722,0.072l0.053,0.543l-0.869,0.449l-53.113-0.052l-0.002,0.043v45.292l0.08-0.038l1.109-0.168l1.834,0.86l1.024-0.723l1.748,0.305l2.12,0.248l1.73,1.44l0.492,2.009l1.092,0.971l0.045-0.953l1.055-0.539l0.98,0.232l1.721,0.119l1.008,0.413l0.604,2.748l1.444,2.054l1.138,0.018l1.619,0.701l1.973,1.783l0.379,1.268l1.277,0.943l1.619,0.701l1.295-0.195l-0.223-1.481l0.471-0.638l0.741-0.11l0.823,0.444l1.85-0.28l1.434,0.729l0.925-0.139l1.223,0.571l1.164,0.204l0.658-0.666l0.896-0.327l1.037,0.603l1.961,0.461l1.451-0.408l1.083-0.354l0.74-0.111l0.711-0.295l0.899-0.326l1.433,0.73l-0.204,1.168l0.566,1.235l0.722,1.028l0.354,1.082l-0.178,1.349l8.182,4.065l1.721,0.121l0.873,0.643h0.513l-0.213,0.64l0.112-0.336l0.227,0.167l0.939-0.471l-0.213-1.704l0.427-0.212h0.425l-0.425-1.065l-0.853-0.213l0.426-0.853l-0.426-1.064l0.426,0.214l0.427-1.491l0.851-3.406l-0.213-2.131l0.426-1.277h-0.426l1.065-0.852l-0.64-0.853l0.854,0.213l1.703-4.046l1.49-0.428l-0.641-1.275l0.641-0.214v0.853l0.424-0.214l-0.424-1.276l-0.426,0.213l0.213-0.426l-0.854-0.213l1.49-0.64l0.427-1.491l-0.427-0.639l0.64-0.215v-1.489l1.703-1.703l-0.638-0.214l1.063-0.213l-1.276-0.426l1.489-0.213l0.214-1.064l-0.64,0.426l-0.427-0.426l0.64,0.213l-0.213-0.639l0.64,0.426l0.213-1.704v-0.212l-0.427,0.425v-0.639l-0.213,0.214l-0.213-0.641l0.64,0.427l0.213-1.064v0.853l0.852-0.426l0.214-1.064l-0.427-0.427h0.854l0.637-1.703l-0.637,0.853l-0.214-0.853h0.638v-0.853l0.213,0.853l0.854-1.491l-0.213-0.426h0.427v0.64l2.556-1.491l-0.853-0.213l-0.853,0.639l-0.213-0.213l0.426-0.426l-0.213-0.426l0.853,0.426l0.638-0.426l0.215,0.426l0.853-1.277l1.489-0.853l0.214-1.702l-0.64-0.215v0.428l-0.852-0.428h1.064l0.213-1.49l1.49-1.277l1.918-6.176l-0.213-4.26l1.489-3.834l0.213-0.639l0.64-3.62l-0.64-0.426l0.64,0.213l-0.213-0.853l1.703-3.193h-0.426l0.426-0.214L278.939,132.632zM261.268,143.072h-0.215l-0.213-0.639l0.641-0.214L261.268,143.072z
  37. 37. M278.939,132.632l-0.641-0.853l0.183-1.97
  38. 38. CommandM278.939,132.632l-0.641-0.853l0.183-1.97
  39. 39. CommandM278.939,132.632l-0.641-0.853l0.183-1.97 x
  40. 40. CommandM278.939,132.632l-0.641-0.853l0.183-1.97 x y
  41. 41. var r = Raphael(100, 10, 300, 250), bg1 = r.path("M50,150l180,0").attr({stroke: "#fff","stroke-width": 28, "stroke-linecap": "round"}), bg2 = r.path("M50,150l180,0").attr({stroke: "#000","stroke-width": 24, "stroke-linecap": "round"}), bar = r.path("M50,150l.001,0").attr({stroke: "#fff","stroke-width": 20, "stroke-linecap": "round"});
  42. 42. var r = Raphael(100, 10, 300, 250), 2000, ">");bar.animate({path: "M50,150l180,0"}, bg1 = r.path("M50,150l180,0").attr({stroke: "#fff","stroke-width": 28, "stroke-linecap": "round"}), bg2 = r.path("M50,150l180,0").attr({stroke: "#000","stroke-width": 24, "stroke-linecap": "round"}), bar = r.path("M50,150l.001,0").attr({stroke: "#fff","stroke-width": 20, "stroke-linecap": "round"});
  43. 43. var r = Raphael(100, 10, 300, 250), 2000, ">");bar.animate({path: "M50,150l180,0"}, bg1 = r.path("M50,150l180,0").attr({stroke: "#fff","stroke-width": 28, "stroke-linecap": "round"}), bg2 = r.path("M50,150l180,0").attr({stroke: "#000","stroke-width": 24, "stroke-linecap": "round"}), bar = r.path("M50,150l.001,0").attr({stroke: "#fff","stroke-width": 20, "stroke-linecap": "round"});
  44. 44. var r = Raphael(100, 10, 300, 250), bg1 = r.path("M50,150a100,100,0,0,1,180,0").attr({stroke: "#fff","stroke-width": 28, "stroke-linecap": "round"}), bg2 = r.path("M50,150a100,100,0,0,1,180,0").attr({stroke: "#000","stroke-width": 24, "stroke-linecap": "round"}), bar = r.path("M50,150a100,100,0,0,1,.001,0").attr({stroke: "#fff","stroke-width": 20, "stroke-linecap": "round"});
  45. 45. var r = Raphael(100, 10, 300, 250), bg1 = r.path("M50,150a100,100,0,0,1,180,0").attr({stroke: "#fff","stroke-width": 28, "stroke-linecap": "round"}), bg2 = r.path("M50,150a100,100,0,0,1,180,0").attr({stroke: "#000","stroke-width": 24, "stroke-linecap": "round"}), bar = r.path("M50,150a100,100,0,0,1,.001,0").attr({stroke: "#fff","stroke-width": 20, "stroke-linecap": "round"});
  46. 46. bar.animate({path: "M50,150a100,100,0,0,1,180,0"}, 2000,">");
  47. 47. bar.animate({path: "M50,150a100,100,0,0,1,180,0"}, 2000,">");
  48. 48. var a = Math.acos(90 / 100), an = Math.PI - 2 * a;r.customAttributes.value = function (val) { var angle = Math.PI + a + an / 100 * val, x = 140 + 100 * Math.cos(angle), y = 193.6 + 100 * Math.sin(angle); return {path: "M50,150A100,100,0,0,1," + [x, y]};};
  49. 49. var a = Math.acos(90 / 100), an = Math.PI - 2 * a;r.customAttributes.value = function (val) { var angle = Math.PI + a + an / 100 * val, x = 140 + 100 * Math.cos(angle), y = 193.6 + 100 * Math.sin(angle); return {path: "M50,150A100,100,0,0,1," + [x, y]};};
  50. 50. var a = Math.acos(90 / 100), an = Math.PI - 2 * a;r.customAttributes.value = function (val) { var angle = Math.PI + a + an / 100 * val, x = 140 + 100 * Math.cos(angle), y = 193.6 + 100 * Math.sin(angle); return {path: "M50,150A100,100,0,0,1," + [x, y]};};
  51. 51. var a = Math.acos(90 / 100),bar.attr({value: 0}).animate({value: 100}, 2000, ">"); an = Math.PI - 2 * a;r.customAttributes.value = function (val) { var angle = Math.PI + a + an / 100 * val, x = 140 + 100 * Math.cos(angle), y = 193.6 + 100 * Math.sin(angle); return {path: "M50,150A100,100,0,0,1," + [x, y]};};
  52. 52. var a = Math.acos(90 / 100),bar.attr({value: 0}).animate({value: 100}, 2000, ">"); an = Math.PI - 2 * a;r.customAttributes.value = function (val) { var angle = Math.PI + a + an / 100 * val, x = 140 + 100 * Math.cos(angle), y = 193.6 + 100 * Math.sin(angle); return {path: "M50,150A100,100,0,0,1," + [x, y]};};
  53. 53. var r = Raphael(100, 10, 300, 250), bar = r.rect(80, 200, 120, 30).attr({stroke: "#fff","stroke-width": 2}), lbl = r.text(140, 180, 30).attr({fill: "#fff", font:"20px Museo Sans"});
  54. 54. var r = Raphael(100, 10, 300, 250),lbl.attr({text: 130});bar.animate({y: 100, 200, 120, 30).attr({stroke: "#fff", bar = r.rect(80, height: 130}, 2000, ">");lbl.animateWith(bar,"stroke-width": 2}), {y: 80}, 2000, ">"); lbl = r.text(140, 180, 30).attr({fill: "#fff", font:"20px Museo Sans"});
  55. 55. var r = Raphael(100, 10, 300, 250),lbl.attr({text: 130});bar.animate({y: 100, 200, 120, 30).attr({stroke: "#fff", bar = r.rect(80, height: 130}, 2000, ">");lbl.animateWith(bar,"stroke-width": 2}), {y: 80}, 2000, ">"); lbl = r.text(140, 180, 30).attr({fill: "#fff", font:"20px Museo Sans"});
  56. 56. bar.animate({y: 100, height: 130}, 1000, ">");lbl.animateWith(bar, {y: 80}, 1000, ">", function () { lbl.attr({text: 130});});
  57. 57. bar.animate({y: 100, height: 130}, 1000, ">");lbl.animateWith(bar, {y: 80}, 1000, ">", function () { lbl.attr({text: 130});});
  58. 58. r.customAttributes.value = function (val) { return {text: Math.round(val)};};bar.animate({y: 100, height: 130}, 2000, ">");lbl.attr({value: 30}).animateWith(bar, {y: 80, value: 130},2000, ">");
  59. 59. r.customAttributes.value = function (val) { return {text: Math.round(val)};};bar.animate({y: 100, height: 130}, 2000, ">");lbl.attr({value: 30}).animateWith(bar, {y: 80, value: 130},2000, ">");
  60. 60. Plugins
  61. 61. Raphael.fn.arrow = function (x, y) { return this.path(["M", x, y] + "m-10-10l20,0 0-6 10,16-10,16 0-6 -20,0 0,6 -10-16 10-16z").attr({ fill: "#fff", stroke: "none", opacity: 0.2 });};Raphael.el.fill = function (fill) { this.attr({fill: fill});};Raphael.el.stroke = function (stroke) { this.attr({stroke: stroke});};
  62. 62. Charts!
  63. 63. Visualisations
  64. 64. 2012 20112010 2007 2009 2008
  65. 65. 2012 2011 20072010 2007 2011 2009 2009 2008 2008 2010 2012
  66. 66. UI
  67. 67. UIWhat kind of UI?
  68. 68. UIWhat kind of UI?
  69. 69. UIWhat kind of UI?
  70. 70. http://raphaeljs.com/icons/
  71. 71. Size does Matter
  72. 72. Printing
  73. 73. Web is not rectangular
  74. 74. Web is not rectangular anymore
  75. 75. Everyone Can Draw
  76. 76. Thank You
  77. 77. http://raphaeljs.com/http://github.com/DmitryBaranovskiy/raphaelhttp://twitter.com/raphaeljs

×