RaphaëlWeb Directions South 2010
http://dmitry.baranovskiy.com/
https://peepcode.com/products/raphaeljs
http://raphaeljs.com
Why?
How?
SVG
Raphaël doesn’t use     Canvas
Raphaëldoesn’t use  Canvas
SVG
VML
JavaScriptSVG           VML
SVG   VML
20 Kb
Free
API
Preparation
var paper = Raphael("holder", 800, 600);var paper = Raphael(holder, 800, 600);var paper = Raphael(10, 20, 800, 600);
Primitives
var circle = paper.circle(cx, cy, r);var rect = paper.rect(x, y, width, height, r);var ellipse = paper.ellipse(cx, cy, rx,...
animate            mousemoveanimateAlong       mouseoutanimateAlongBack   mouseoveranimateWith        mouseupattr         ...
animate            mousemoveanimateAlong       mouseoutanimateAlongBack   mouseoveranimateWith        mouseupattr         ...
circle.attr({    fill: "#fc0",    stroke: "hsb(0.6, 0.7, 0.9)",    "stroke-width": 5,    "stroke-opacity": 0.5,    cx: 50}...
c.animate({cx: 230, cy: 130}, 2000);
c.animate({cx: 230, cy: 130}, 2000);
c.animate({cx: 100, cy: 230}, 1000, function () {    c.animate({cx: 230, cy: 130}, 1000);});
c.animate({cx: 100, cy: 230}, 1000, function () {    c.animate({cx: 230, cy: 130}, 1000);});
c.animate({    "50%": {cx: 100, cy: 230},    "100%": {cx: 230, cy: 130}}, 2000);
c.animate({    "50%": {cx: 100, cy: 230},    "100%": {cx: 230, cy: 130}}, 2000);
c.animate({    "50%": {cx: 100},    "100%": {cx: 230}}, 2000).animate({    "25%": {cy: 30, r: 10},    "50%": {cy: 230, r: ...
c.animate({    "50%": {cx: 100},    "100%": {cx: 230}}, 2000).animate({    "25%": {cy: 30, r: 10},    "50%": {cy: 230, r: ...
clip-rect      href               stroke-linejoincursor         opacity            stroke-miterlimitcx             path   ...
Paths
var path = paper.path(pathString);
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.0...
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.0...
M278.939,132.632l-0.641-0.853l0.183-1.97
CommandM278.939,132.632l-0.641-0.853l0.183-1.97
CommandM278.939,132.632l-0.641-0.853l0.183-1.97   x
CommandM278.939,132.632l-0.641-0.853l0.183-1.97   x        y
var r = Raphael(100, 10, 300, 250),    bg1 = r.path("M50,150l180,0").attr({stroke: "#fff","stroke-width": 28, "stroke-line...
var r = Raphael(100, 10, 300, 250), 2000, ">");bar.animate({path: "M50,150l180,0"},    bg1 = r.path("M50,150l180,0").attr(...
var r = Raphael(100, 10, 300, 250), 2000, ">");bar.animate({path: "M50,150l180,0"},    bg1 = r.path("M50,150l180,0").attr(...
var r = Raphael(100, 10, 300, 250),    bg1 = r.path("M50,150a100,100,0,0,1,180,0").attr({stroke: "#fff","stroke-width": 28...
var r = Raphael(100, 10, 300, 250),    bg1 = r.path("M50,150a100,100,0,0,1,180,0").attr({stroke: "#fff","stroke-width": 28...
bar.animate({path: "M50,150a100,100,0,0,1,180,0"}, 2000,">");
bar.animate({path: "M50,150a100,100,0,0,1,180,0"}, 2000,">");
var a = Math.acos(90 / 100),    an = Math.PI - 2 * a;r.customAttributes.value = function (val) {    var angle = Math.PI + ...
var a = Math.acos(90 / 100),    an = Math.PI - 2 * a;r.customAttributes.value = function (val) {    var angle = Math.PI + ...
var a = Math.acos(90 / 100),    an = Math.PI - 2 * a;r.customAttributes.value = function (val) {    var angle = Math.PI + ...
var a = Math.acos(90 / 100),bar.attr({value: 0}).animate({value: 100}, 2000, ">");    an = Math.PI - 2 * a;r.customAttribu...
var a = Math.acos(90 / 100),bar.attr({value: 0}).animate({value: 100}, 2000, ">");    an = Math.PI - 2 * a;r.customAttribu...
var r = Raphael(100, 10, 300, 250),    bar = r.rect(80, 200, 120, 30).attr({stroke: "#fff","stroke-width": 2}),    lbl = r...
var r = Raphael(100, 10, 300, 250),lbl.attr({text: 130});bar.animate({y: 100, 200, 120, 30).attr({stroke: "#fff",    bar =...
var r = Raphael(100, 10, 300, 250),lbl.attr({text: 130});bar.animate({y: 100, 200, 120, 30).attr({stroke: "#fff",    bar =...
bar.animate({y: 100, height: 130}, 1000, ">");lbl.animateWith(bar, {y: 80}, 1000, ">", function () {    lbl.attr({text: 13...
bar.animate({y: 100, height: 130}, 1000, ">");lbl.animateWith(bar, {y: 80}, 1000, ">", function () {    lbl.attr({text: 13...
r.customAttributes.value = function (val) {    return {text: Math.round(val)};};bar.animate({y: 100, height: 130}, 2000, "...
r.customAttributes.value = function (val) {    return {text: Math.round(val)};};bar.animate({y: 100, height: 130}, 2000, "...
Plugins
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 ...
Charts!
Visualisations
2012   20112010             2007 2009          2008
2012   2011                            20072010             2007                        2011 2009                         ...
UI
UIWhat kind of UI?
UIWhat kind of UI?
UIWhat kind of UI?
http://raphaeljs.com/icons/
Size does Matter
Printing
Web is not rectangular
Web is not rectangular      anymore
Everyone Can Draw
Thank You
http://raphaeljs.com/http://github.com/DmitryBaranovskiy/raphaelhttp://twitter.com/raphaeljs
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Raphaël
Upcoming SlideShare
Loading in …5
×

Raphaël

3,036 views

Published on

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

No Downloads
Views
Total views
3,036
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
52
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

×