Downloaded 52 times
![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]};
};](https://image.slidesharecdn.com/raphal-101202184227-phpapp02/75/Raphael-70-2048.jpg)
![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]};
};](https://image.slidesharecdn.com/raphal-101202184227-phpapp02/75/Raphael-71-2048.jpg)
![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]};
};](https://image.slidesharecdn.com/raphal-101202184227-phpapp02/75/Raphael-72-2048.jpg)
![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]};
};](https://image.slidesharecdn.com/raphal-101202184227-phpapp02/75/Raphael-73-2048.jpg)
![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]};
};](https://image.slidesharecdn.com/raphal-101202184227-phpapp02/75/Raphael-74-2048.jpg)
![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});
};](https://image.slidesharecdn.com/raphal-101202184227-phpapp02/75/Raphael-83-2048.jpg)
Uploaded byDmitry Baranovskiy
Raphaël
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.
Raphaël
- 3.
- 4.
- 9.
- 11.
- 15.
- 20.
- 21.
- 22. Raphaël doesn’t use Canvas
- 23. Raphaël doesn’t use Canvas
- 24.
- 26.
- 31. JavaScript SVG VML
- 32. SVG VML
- 34.
- 35.
- 38.
- 39.
- 40. var paper =Raphael("holder", 800, 600); var paper = Raphael(holder, 800, 600); var paper = Raphael(10, 20, 800, 600);
- 41.
- 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.
- 56. var path =paper.path(pathString);
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 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"});
- 68.
- 69.
- 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.
- 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.
- 85.
- 86. 2012 2011 2010 2007 2009 2008
- 87. 2012 2011 2007 2010 2007 2011 2009 2009 2008 2008 2010 2012
- 89.
- 90.
- 91.
- 92.
- 100.
- 101.
- 104.
- 107. Web is notrectangular
- 108. Web is notrectangular anymore
- 109.
- 110.
- 111.