Raphaël
•
5 likes•1,405 views
Raphaël is a JavaScript library for working with vector graphics on the web. It allows developers to use SVG, VML, or Canvas to draw and animate graphics in browsers. The library provides a simple API for creating common shapes like circles, rectangles, paths, and text. It also supports animating the attributes of these elements over time. Raphaël aims to make complex vector graphics simple and accessible to work with using JavaScript.
More Related Content
Similar to Raphaël
Similar to Raphaël (20)
More from Dmitry Baranovskiy
Recently uploaded
Recently uploaded (20)
Raphaël
- 3. Raphaël Web Directions South 2010
- 15. Why?
- 20. How?
- 21. SVG
- 22. Raphaël doesn’t use Canvas
- 23. Raphaël doesn’t use Canvas
- 24. SVG
- 26. VML
- 31. JavaScript SVG VML
- 32. SVG VML
- 34. 20 Kb
- 35. Free
- 38. API
- 39. Preparation
- 40. var paper = Raphael("holder", 800, 600); var paper = Raphael(holder, 800, 600); var paper = Raphael(10, 20, 800, 600);
- 41. Primitives
- 42. 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);
- 43. animate mousemove animateAlong mouseout animateAlongBack mouseover animateWith mouseup attr onAnimation click remove clone rotate dblclick scale getBBox show hide stop hover toBack insertAfter toFront insertBefore translate mousedown
- 44. animate mousemove animateAlong mouseout animateAlongBack mouseover animateWith mouseup attr onAnimation click remove clone rotate dblclick scale getBBox show hide stop hover toBack insertAfter toFront insertBefore translate mousedown
- 45. 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"); });
- 46. c.animate({cx: 230, cy: 130}, 2000);
- 47. c.animate({cx: 230, cy: 130}, 2000);
- 48. c.animate({cx: 100, cy: 230}, 1000, function () { c.animate({cx: 230, cy: 130}, 1000); });
- 49. c.animate({cx: 100, cy: 230}, 1000, function () { c.animate({cx: 230, cy: 130}, 1000); });
- 50. c.animate({ "50%": {cx: 100, cy: 230}, "100%": {cx: 230, cy: 130} }, 2000);
- 51. c.animate({ "50%": {cx: 100, cy: 230}, "100%": {cx: 230, cy: 130} }, 2000);
- 52. 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);
- 53. 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);
- 54. clip-rect href stroke-linejoin cursor opacity stroke-miterlimit cx path stroke-opacity cy r stroke-width fill rotation target fill-opacity rx text font ry text-anchor font-family scale title font-size src translation font-style stroke width font-weight stroke-dasharray x height stroke-linecap y
- 55. Paths
- 56. var path = paper.path(pathString);
- 63. 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"});
- 64. 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"});
- 65. 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"});
- 66. 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"});
- 67. 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"});
- 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]}; };
- 71. 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]}; };
- 72. 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]}; };
- 73. 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]}; };
- 74. 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]}; };
- 75. 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'"});
- 76. 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'"});
- 77. 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'"});
- 78. bar.animate({y: 100, height: 130}, 1000, ">"); lbl.animateWith(bar, {y: 80}, 1000, ">", function () { lbl.attr({text: 130}); });
- 79. bar.animate({y: 100, height: 130}, 1000, ">"); lbl.animateWith(bar, {y: 80}, 1000, ">", function () { lbl.attr({text: 130}); });
- 80. 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, ">");
- 81. 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, ">");
- 82. Plugins
- 83. 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}); };
- 84. Charts!
- 85. Visualisations
- 86. 2012 2011 2010 2007 2009 2008
- 87. 2012 2011 2007 2010 2007 2011 2009 2009 2008 2008 2010 2012
- 89. UI
- 90. UI What kind of UI?
- 91. UI What kind of UI?
- 92. UI What kind of UI?
- 101. Size does Matter
- 104. Printing
- 107. Web is not rectangular
- 108. Web is not rectangular anymore
- 109. Everyone Can Draw
- 110. Thank You