raphaël js conf
TRANSCRIPT
![Page 1: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/1.jpg)
Raphaël
Dmitry Baranovskiy · JSConf 2010
![Page 2: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/2.jpg)
![Page 3: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/3.jpg)
How is it done?
![Page 4: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/4.jpg)
SVG
![Page 5: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/5.jpg)
![Page 6: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/6.jpg)
VML
![Page 7: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/7.jpg)
![Page 8: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/8.jpg)
![Page 9: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/9.jpg)
![Page 10: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/10.jpg)
JavaScript
SVG VML
![Page 11: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/11.jpg)
SVG VML
![Page 12: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/12.jpg)
![Page 13: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/13.jpg)
20 Kb
![Page 14: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/14.jpg)
Anything, but charts?
![Page 15: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/15.jpg)
Raphaël—JavaScript Library
Raphaël is a small JavaScript library that should simplify your work with vector
graphics on the web. If you want to create your own specific chart or image crop
and rotate widget, for example, you can achieve it simply and easily with this
library.
Raphaël uses the SVG W3C Recommendation and VML as a base for
creating graphics. This means every graphical object you create is also a DOM
object, so you can attach JavaScript event handlers or modify them later.
Raphaël’s goal is to provide an adapter that will make drawing vector art
compatible cross-browser and easy.
Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet
Explorer 6.0+.
For more examples take a look at charting plugin: gRaphaël.
Download and include raphael.js into your HTML page, then use it as simple
as:
// Creates canvas 320 × 200 at 10, 50var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10var circle = paper.circle(50, 40, 10);// Sets the fill attribute of the circle to red (#f00)circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to whitecircle.attr("stroke", "#fff");
For more usage samples, check the documentation page.
Our recommendation is to GZIP it. It
will help to reduce file size to 20 Kb.
You can download uncompressed
source (133 Kb) as well.
Hope it will help
Ask your questions there.
Best source of updates, so far.
You know you want to…
This project is distributed under MIT
License.
Project is hosted at GitHub.
Download source code or report
bugs there.
Show your support—buy a t‑shirt.
What is it?
How to use it?
Demos
Download v. 1.3.1 (57 Kb)
Documentation
Discussion Group
Donate
It is Open
Source & Bugs
T-shirts
Some Rights Reserved by Dmitry Baranovskiy
Logo by Wasabicube
![Page 16: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/16.jpg)
Raphaël—JavaScript Library
Raphaël is a small JavaScript library that should simplify your work with vector
graphics on the web. If you want to create your own specific chart or image crop
and rotate widget, for example, you can achieve it simply and easily with this
library.
Raphaël uses the SVG W3C Recommendation and VML as a base for
creating graphics. This means every graphical object you create is also a DOM
object, so you can attach JavaScript event handlers or modify them later.
Raphaël’s goal is to provide an adapter that will make drawing vector art
compatible cross-browser and easy.
Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet
Explorer 6.0+.
For more examples take a look at charting plugin: gRaphaël.
Download and include raphael.js into your HTML page, then use it as simple
as:
// Creates canvas 320 × 200 at 10, 50var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10var circle = paper.circle(50, 40, 10);// Sets the fill attribute of the circle to red (#f00)circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to whitecircle.attr("stroke", "#fff");
For more usage samples, check the documentation page.
Our recommendation is to GZIP it. It
will help to reduce file size to 20 Kb.
You can download uncompressed
source (133 Kb) as well.
Hope it will help
Ask your questions there.
Best source of updates, so far.
You know you want to…
This project is distributed under MIT
License.
Project is hosted at GitHub.
Download source code or report
bugs there.
Show your support—buy a t‑shirt.
What is it?
How to use it?
Demos
Download v. 1.3.1 (57 Kb)
Documentation
Discussion Group
Donate
It is Open
Source & Bugs
T-shirts
Some Rights Reserved by Dmitry Baranovskiy
Logo by Wasabicube
![Page 17: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/17.jpg)
Size does Matter
![Page 18: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/18.jpg)
![Page 19: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/19.jpg)
![Page 20: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/20.jpg)
Printing
![Page 21: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/21.jpg)
![Page 22: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/22.jpg)
![Page 23: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/23.jpg)
![Page 24: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/24.jpg)
![Page 25: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/25.jpg)
![Page 26: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/26.jpg)
![Page 27: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/27.jpg)
![Page 28: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/28.jpg)
![Page 29: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/29.jpg)
![Page 30: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/30.jpg)
iPad
![Page 31: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/31.jpg)
API
![Page 32: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/32.jpg)
Creating
![Page 33: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/33.jpg)
var paper = Raphael("holder", 800, 600);
var paper = Raphael(holder, 800, 600);
var paper = Raphael(10, 20, 800, 600);
![Page 34: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/34.jpg)
Primitives
![Page 35: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/35.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);
![Page 36: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/36.jpg)
animateanimateAlonganimateAlongBackanimateWithattrclickclonedblclickgetBBoxhidehoverinsertAfterinsertBeforemousedown
mousemovemouseoutmouseovermouseuponAnimationremoverotatescaleshowstoptoBacktoFronttranslate
![Page 37: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/37.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 38: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/38.jpg)
clip-rectcursorcxcyfillfill-opacityfontfont-familyfont-sizefont-stylefont-weightgradient
heighthrefopacitypathrrotationrxryscalesrcstrokestroke-dasharray
stroke-linecapstroke-linejoinstroke-miterlimitstroke-opacitystroke-widthtargettext-anchortitletranslationwidthxy
![Page 39: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/39.jpg)
Paths
&
![Page 40: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/40.jpg)
var path = paper.path(pathString);
![Page 41: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/41.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 42: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/42.jpg)
M278.939,132.632l-0.641-0.853l0.183-1.97
![Page 43: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/43.jpg)
M278.939,132.632l-0.641-0.853l0.183-1.97
Command
![Page 44: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/44.jpg)
M278.939,132.632l-0.641-0.853l0.183-1.97
Command
x
![Page 45: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/45.jpg)
M278.939,132.632l-0.641-0.853l0.183-1.97
Command
x y
![Page 46: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/46.jpg)
Plugins
![Page 47: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/47.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 48: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/48.jpg)
gRaphaël
![Page 49: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/49.jpg)
![Page 50: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/50.jpg)
Everyone Can Draw
![Page 51: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/51.jpg)
Thank You
![Page 52: Raphaël JS Conf](https://reader033.vdocuments.mx/reader033/viewer/2022052205/55561a1cd8b42ae0238b505c/html5/thumbnails/52.jpg)
http://raphaeljs.com/
http://github.com/DmitryBaranovskiy/raphael
http://dmitry.baranovskiy.com/
http://twitter.com/raphaeljs