Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Raphaël
Ähnlich wie Raphaël (20)
Mehr von Dmitry Baranovskiy
Kürzlich hochgeladen
Kürzlich hochgeladen (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