raphaël
TRANSCRIPT
![Page 1: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/1.jpg)
![Page 2: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/2.jpg)
![Page 3: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/3.jpg)
Raphaël
Web Directions South 2010
![Page 5: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/5.jpg)
![Page 6: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/6.jpg)
![Page 7: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/7.jpg)
![Page 8: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/8.jpg)
![Page 9: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/9.jpg)
https://peepcode.com/products/raphaeljs
![Page 10: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/10.jpg)
![Page 12: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/12.jpg)
![Page 13: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/13.jpg)
![Page 14: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/14.jpg)
![Page 15: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/15.jpg)
Why?
![Page 16: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/16.jpg)
![Page 17: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/17.jpg)
![Page 18: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/18.jpg)
![Page 19: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/19.jpg)
![Page 20: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/20.jpg)
How?
![Page 21: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/21.jpg)
SVG
![Page 22: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/22.jpg)
Raphaël doesn’t use Canvas
![Page 23: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/23.jpg)
Raphaël doesn’t use
Canvas
![Page 24: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/24.jpg)
SVG
![Page 25: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/25.jpg)
![Page 26: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/26.jpg)
VML
![Page 27: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/27.jpg)
![Page 28: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/28.jpg)
![Page 29: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/29.jpg)
![Page 30: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/30.jpg)
![Page 31: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/31.jpg)
JavaScript
SVG VML
![Page 32: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/32.jpg)
SVG VML
![Page 33: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/33.jpg)
![Page 34: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/34.jpg)
20 Kb
![Page 35: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/35.jpg)
Free
![Page 36: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/36.jpg)
![Page 37: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/37.jpg)
![Page 38: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/38.jpg)
API
![Page 39: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/39.jpg)
Preparation
![Page 40: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/40.jpg)
var paper = Raphael("holder", 800, 600);
var paper = Raphael(holder, 800, 600);
var paper = Raphael(10, 20, 800, 600);
![Page 41: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/41.jpg)
Primitives
![Page 42: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/42.jpg)
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);
![Page 43: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/43.jpg)
animateanimateAlonganimateAlongBackanimateWithattrclickclonedblclickgetBBoxhidehoverinsertAfterinsertBeforemousedown
mousemovemouseoutmouseovermouseuponAnimationremoverotatescaleshowstoptoBacktoFronttranslate
![Page 44: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/44.jpg)
animateanimateAlonganimateAlongBackanimateWithattrclickclonedblclickgetBBoxhidehoverinsertAfterinsertBeforemousedown
mousemovemouseoutmouseovermouseuponAnimationremoverotatescaleshowstoptoBacktoFronttranslate
![Page 45: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/45.jpg)
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");
});
![Page 46: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/46.jpg)
c.animate({cx: 230, cy: 130}, 2000);
![Page 47: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/47.jpg)
c.animate({cx: 230, cy: 130}, 2000);
![Page 48: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/48.jpg)
c.animate({cx: 100, cy: 230}, 1000, function () {
c.animate({cx: 230, cy: 130}, 1000);
});
![Page 49: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/49.jpg)
c.animate({cx: 100, cy: 230}, 1000, function () {
c.animate({cx: 230, cy: 130}, 1000);
});
![Page 50: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/50.jpg)
c.animate({
"50%": {cx: 100, cy: 230},
"100%": {cx: 230, cy: 130}
}, 2000);
![Page 51: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/51.jpg)
c.animate({
"50%": {cx: 100, cy: 230},
"100%": {cx: 230, cy: 130}
}, 2000);
![Page 52: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/52.jpg)
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);
![Page 53: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/53.jpg)
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);
![Page 54: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/54.jpg)
clip-rectcursorcxcyfillfill-opacityfontfont-familyfont-sizefont-stylefont-weightheight
hrefopacitypathrrotationrxryscalesrcstrokestroke-dasharraystroke-linecap
stroke-linejoinstroke-miterlimitstroke-opacitystroke-widthtargettexttext-anchortitletranslationwidthxy
![Page 55: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/55.jpg)
Paths
![Page 56: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/56.jpg)
var path = paper.path(pathString);
![Page 57: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/57.jpg)
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
![Page 58: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/58.jpg)
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
![Page 59: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/59.jpg)
M278.939,132.632l-0.641-0.853l0.183-1.97
![Page 60: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/60.jpg)
M278.939,132.632l-0.641-0.853l0.183-1.97
Command
![Page 61: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/61.jpg)
M278.939,132.632l-0.641-0.853l0.183-1.97
Command
x
![Page 62: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/62.jpg)
M278.939,132.632l-0.641-0.853l0.183-1.97
Command
x y
![Page 63: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/63.jpg)
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"});
![Page 64: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/64.jpg)
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"});
bar.animate({path: "M50,150l180,0"}, 2000, ">");
![Page 65: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/65.jpg)
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"});
bar.animate({path: "M50,150l180,0"}, 2000, ">");
![Page 66: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/66.jpg)
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"});
![Page 67: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/67.jpg)
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"});
![Page 68: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/68.jpg)
bar.animate({path: "M50,150a100,100,0,0,1,180,0"}, 2000,
">");
![Page 69: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/69.jpg)
bar.animate({path: "M50,150a100,100,0,0,1,180,0"}, 2000,
">");
![Page 70: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/70.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]};
};
![Page 71: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/71.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]};
};
![Page 72: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/72.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]};
};
![Page 73: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/73.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]};
};
bar.attr({value: 0}).animate({value: 100}, 2000, ">");
![Page 74: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/74.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]};
};
bar.attr({value: 0}).animate({value: 100}, 2000, ">");
![Page 75: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/75.jpg)
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'"});
![Page 76: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/76.jpg)
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'"});
lbl.attr({text: 130});
bar.animate({y: 100, height: 130}, 2000, ">");
lbl.animateWith(bar, {y: 80}, 2000, ">");
![Page 77: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/77.jpg)
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'"});
lbl.attr({text: 130});
bar.animate({y: 100, height: 130}, 2000, ">");
lbl.animateWith(bar, {y: 80}, 2000, ">");
![Page 78: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/78.jpg)
bar.animate({y: 100, height: 130}, 1000, ">");
lbl.animateWith(bar, {y: 80}, 1000, ">", function () {
lbl.attr({text: 130});
});
![Page 79: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/79.jpg)
bar.animate({y: 100, height: 130}, 1000, ">");
lbl.animateWith(bar, {y: 80}, 1000, ">", function () {
lbl.attr({text: 130});
});
![Page 80: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/80.jpg)
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, ">");
![Page 81: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/81.jpg)
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, ">");
![Page 82: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/82.jpg)
Plugins
![Page 83: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/83.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});
};
![Page 84: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/84.jpg)
Charts!
![Page 85: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/85.jpg)
Visualisations
![Page 86: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/86.jpg)
2007
20082009
2010
20112012
![Page 87: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/87.jpg)
2007
20082009
2010
20112012
2011
2008
2010 2012
2009
2007
![Page 88: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/88.jpg)
![Page 89: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/89.jpg)
UI
![Page 90: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/90.jpg)
UIWhat kind of UI?
![Page 91: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/91.jpg)
What kind of UI?
UI
![Page 92: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/92.jpg)
What kind of UI?
UI
![Page 93: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/93.jpg)
![Page 94: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/94.jpg)
![Page 95: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/95.jpg)
![Page 96: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/96.jpg)
![Page 97: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/97.jpg)
![Page 98: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/98.jpg)
![Page 99: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/99.jpg)
![Page 101: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/101.jpg)
Size does Matter
![Page 102: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/102.jpg)
![Page 103: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/103.jpg)
![Page 104: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/104.jpg)
Printing
![Page 105: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/105.jpg)
![Page 106: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/106.jpg)
![Page 107: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/107.jpg)
Web is not rectangular
![Page 108: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/108.jpg)
anymoreWeb is not rectangular
![Page 109: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/109.jpg)
Everyone Can Draw
![Page 110: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/110.jpg)
Thank You
![Page 111: Raphaël](https://reader033.vdocument.in/reader033/viewer/2022060109/55561b19d8b42a3f168b5475/html5/thumbnails/111.jpg)
http://raphaeljs.com/
http://github.com/DmitryBaranovskiy/raphael
http://twitter.com/raphaeljs