The document discusses Raphaël, an open source JavaScript library for working with vector graphics on the web. It provides a method for drawing and animating SVG and VML shapes using JavaScript. The API allows creating common shapes like circles, rectangles, paths, etc. and setting attributes like fill color, stroke, transformations. It also supports animation of shapes over time. Overall it provides a simple and lightweight way to work with vector graphics across browsers using a consistent JavaScript API.

1. Monday, November 29, 2010

2. Monday, November 29, 2010

3. Raphaël
Sencha Conference 2010
Monday, November 29, 2010

4. Monday, November 29, 2010

5. Monday, November 29, 2010

6. Monday, November 29, 2010

7. Monday, November 29, 2010

8. Monday, November 29, 2010

9. https://peepcode.com/products/
Monday, November 29, 2010

10. Monday, November 29, 2010

11. Why?
What?
How?
Where?
Monday, November 29, 2010

12. Why?
Monday, November 29, 2010

13. Monday, November 29, 2010

14. Monday, November 29, 2010

15. Monday, November 29, 2010

16. Monday, November 29, 2010

17. What?
Monday, November 29, 2010

18. SVG
Monday, November 29, 2010

19. Raphaël doesn’t
use Canvas
Monday, November 29, 2010

20. Raphaël
doesn’t use
Canvas
Monday, November 29, 2010

21. SVG
Monday, November 29, 2010

22. Monday, November 29, 2010

23. VML
Monday, November 29, 2010

24. Monday, November 29, 2010

25. Monday, November 29, 2010

26. Monday, November 29, 2010

27. JavaScript
SVG VML
Monday, November 29, 2010

28. JavaScript
SVG VML
Monday, November 29, 2010

29. SVG VML
Monday, November 29, 2010

30. SVG VML
Monday, November 29, 2010

31. 20 Kb
Monday, November 29, 2010

32. Free
Monday, November 29, 2010

33. Monday, November 29, 2010

34. Monday, November 29, 2010

35. How?
Monday, November 29, 2010

36. API
Monday, November 29, 2010

37. Preparation
Monday, November 29, 2010

38. var paper = Raphael("holder", 800, 600);
var paper = Raphael(holder, 800, 600);
var paper = Raphael(10, 20, 800, 600);
Monday, November 29, 2010

39. Primitives
Monday, November 29, 2010

40. 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);
Monday, November 29, 2010

41. animate mouseout
animateAlong mouseover
animateAlongBack mouseup
animateWith onAnimation
attr remove
click rotate
clone scale
dblclick show
getBBox stop
hide toBack
hover toFront
insertAfter translate
insertBefore
mousedown
mousemove
Monday, November 29, 2010

42. animate mouseout
animateAlong mouseover
animateAlongBack mouseup
animateWith onAnimation
attr remove
click rotate
clone scale
dblclick show
getBBox stop
hide toBack
hover toFront
insertAfter translate
insertBefore
mousedown
mousemove
Monday, November 29, 2010

43. 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");
});
Monday, November 29, 2010

44. c.animate({cx: 230, cy: 130}, 2000);
Monday, November 29, 2010

45. c.animate({cx: 230, cy: 130}, 2000);
Monday, November 29, 2010

46. c.animate({cx: 100, cy: 230}, 1000, function () {
c.animate({cx: 230, cy: 130}, 1000);
});
Monday, November 29, 2010

47. c.animate({cx: 100, cy: 230}, 1000, function () {
c.animate({cx: 230, cy: 130}, 1000);
});
Monday, November 29, 2010

48. c.animate({
"50%": {cx: 100, cy: 230},
"100%": {cx: 230, cy: 130}
}, 2000);
Monday, November 29, 2010

49. c.animate({
"50%": {cx: 100, cy: 230},
"100%": {cx: 230, cy: 130}
}, 2000);
Monday, November 29, 2010

50. 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);
Monday, November 29, 2010

51. 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);
Monday, November 29, 2010

52. clip-rect opacity stroke-opacity
cursor path stroke-width
cx r target
cy rotation text
fill rx text-anchor
fill-opacity ry title
font scale translation
font-family src width
font-size stroke x
font-style stroke-dasharray y
font-weight stroke-linecap
height stroke-linejoin
href stroke-miterlimit
Monday, November 29, 2010

53. Paths
Monday, November 29, 2010

54. var path = paper.path(pathString);
Monday, November 29, 2010

55. 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.0
68l0.722-0.073l-0.651,0.795l-0.129,0.559l-1.049,0.47l-0.757-0.291l-0.433-0.6
88l-0.651,0.794l-0.651,0.795l-0.309,0.578l-0.688,0.433l-0.47-1.049l-0.069-0.7
23l-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.23
7l-1.321-0.416l-0.541,0.053L250,132.249l-1.104-0.073l-0.073,1.102l-0.722,0.0
72l0.053,0.543l-0.869,0.449l-53.113-0.052l-0.002,0.043v45.292l0.08-0.038l1.1
09-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.349
l8.182,4.065l1.721,0.121l0.873,0.643h0.513l-0.213,0.64l0.112-0.336l0.227,0.16
7l0.939-0.471l-0.213-1.704l0.427-0.212h0.425l-0.425-1.065l-0.853-0.213l0.42
6-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.4
26l-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.42
7,0.425v-0.639l-0.213,0.214l-0.213-0.641l0.64,0.427l0.213-1.064v0.853l0.852-
Monday, November 29, 2010

56. 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.0
68l0.722-0.073l-0.651,0.795l-0.129,0.559l-1.049,0.47l-0.757-0.291l-0.433-0.6
88l-0.651,0.794l-0.651,0.795l-0.309,0.578l-0.688,0.433l-0.47-1.049l-0.069-0.7
23l-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.23
7l-1.321-0.416l-0.541,0.053L250,132.249l-1.104-0.073l-0.073,1.102l-0.722,0.0
72l0.053,0.543l-0.869,0.449l-53.113-0.052l-0.002,0.043v45.292l0.08-0.038l1.1
09-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.349
l8.182,4.065l1.721,0.121l0.873,0.643h0.513l-0.213,0.64l0.112-0.336l0.227,0.16
7l0.939-0.471l-0.213-1.704l0.427-0.212h0.425l-0.425-1.065l-0.853-0.213l0.42
6-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.4
26l-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.42
7,0.425v-0.639l-0.213,0.214l-0.213-0.641l0.64,0.427l0.213-1.064v0.853l0.852-
Monday, November 29, 2010

57. M278.939,132.632l-0.641-0.853l0.183-1
.97
Monday, November 29, 2010

58. M278.939,132.632l-0.641-0.853l0.183-1
.97
Monday, November 29, 2010

59. M278.939,132.632l-0.641-0.853l0.183-1
.97
x
Monday, November 29, 2010

60. M278.939,132.632l-0.641-0.853l0.183-1
.97
x y
Monday, November 29, 2010

61. 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"});
Monday, November 29, 2010

62. 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"});
Monday, November 29, 2010

63. 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"});
Monday, November 29, 2010

64. 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"});
Monday, November 29, 2010

65. 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"});
Monday, November 29, 2010

66. bar.animate({path: "M50,150a100,100,0,0,1,180,0"}, 2000,
">");
Monday, November 29, 2010

67. bar.animate({path: "M50,150a100,100,0,0,1,180,0"}, 2000,
">");
Monday, November 29, 2010

68. 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]};
};
Monday, November 29, 2010

69. 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]};
};
Monday, November 29, 2010

70. 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]};
};
Monday, November 29, 2010

71. 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]};
};
Monday, November 29, 2010

72. 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]};
};
Monday, November 29, 2010

73. 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'"});
Monday, November 29, 2010

74. var r = Raphael(100, 10, 300, 250),
lbl.attr({text: 130});
bar.animate({y: 100, height: 130}, 2000, ">"); "#fff", "stroke-
bar = r.rect(80, 200, 120, 30).attr({stroke:
lbl.animateWith(bar, {y: 80}, 2000, ">");
width": 2}),
lbl = r.text(140, 180, 30).attr({fill: "#fff", font: "20px
'Museo Sans'"});
Monday, November 29, 2010

75. var r = Raphael(100, 10, 300, 250),
lbl.attr({text: 130});
bar.animate({y: 100, height: 130}, 2000, ">"); "#fff", "stroke-
bar = r.rect(80, 200, 120, 30).attr({stroke:
lbl.animateWith(bar, {y: 80}, 2000, ">");
width": 2}),
lbl = r.text(140, 180, 30).attr({fill: "#fff", font: "20px
'Museo Sans'"});
Monday, November 29, 2010

76. bar.animate({y: 100, height: 130}, 1000, ">");
lbl.animateWith(bar, {y: 80}, 1000, ">", function () {
lbl.attr({text: 130});
});
Monday, November 29, 2010

77. bar.animate({y: 100, height: 130}, 1000, ">");
lbl.animateWith(bar, {y: 80}, 1000, ">", function () {
lbl.attr({text: 130});
});
Monday, November 29, 2010

78. 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,
">");
Monday, November 29, 2010

79. 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,
">");
Monday, November 29, 2010

80. Plugins
Monday, November 29, 2010

81. 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});
};
Monday, November 29, 2010

82. Where?
Monday, November 29, 2010

83. Charts!
Monday, November 29, 2010

84. Visualizations
Monday, November 29, 2010

85. 2012
2011
2010 2007
2009
2008
Monday, November 29, 2010

86. 2012
2011 2007
2010 2007
2011
2009
2009
2008 2008
2010 2012
Monday, November 29, 2010

87. Monday, November 29, 2010

88. UI
Monday, November 29, 2010

89. UI
What kind
of UI?
Monday, November 29, 2010

90. UI
What kind of
UI?
Monday, November 29, 2010

91. UI
What kind of
UI?
Monday, November 29, 2010

92. Monday, November 29, 2010

93. Monday, November 29, 2010

94. Monday, November 29, 2010

95. Monday, November 29, 2010

96. Monday, November 29, 2010

97. Monday, November 29, 2010

98. Monday, November 29, 2010

99. http://raphaeljs.com/icons/
Monday, November 29, 2010

100. Size does Matter
Monday, November 29, 2010

101. Monday, November 29, 2010

102. Monday, November 29, 2010

103. Monday, November 29, 2010

104. Printing
Monday, November 29, 2010

105. Web is not rectangular
Monday, November 29, 2010

106. Web is not rectangular
anymore
Monday, November 29, 2010

107. Everyone Can Draw
Monday, November 29, 2010

108. Thank You
Monday, November 29, 2010

109. http://raphaeljs.com/
http://github.com/DmitryBaranovskiy/raphael
http://twitter.com/raphaeljs
http://dmitry.baranovskiy.com/
Monday, November 29, 2010