Raphaël

Dmitry Baranovskiy · JSConf 2010
How is it done?
SVG
VML
JavaScript


SVG           VML
SVG   VML
20 Kb
Anything, but charts?
Raphaël—JavaScript Library


       What is it?                                                                  Download ...
Raphaël—JavaScript Library


       What is it?                                                                  Download ...
Size does Matter
Printing
iPad
API
Creating
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,...
animate            mousemove
animateAlong       mouseout
animateAlongBack   mouseover
animateWith        mouseup
attr     ...
circle.attr({
    fill: "#fc0",
    stroke: "hsb(0.6, 0.7, 0.9)",
    "stroke-width": 5,
    "stroke-opacity": 0.5,
    cx...
clip-rect      height             stroke-linecap
cursor         href               stroke-linejoin
cx             opacity ...
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....
M278.939,132.632l-0.641-0.853l0.183-1.97
Command


M278.939,132.632l-0.641-0.853l0.183-1.97
Command


M278.939,132.632l-0.641-0.853l0.183-1.97


   x
Command


M278.939,132.632l-0.641-0.853l0.183-1.97


   x        y
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-1...
gRaphaël
Everyone Can Draw
Thank You
http://raphaeljs.com/



http://github.com/DmitryBaranovskiy/raphael



http://dmitry.baranovskiy.com/



http://twitter.c...
Raphaël JS Conf
Raphaël JS Conf
Raphaël JS Conf
Raphaël JS Conf
Raphaël JS Conf
Raphaël JS Conf
Raphaël JS Conf
Raphaël JS Conf
Raphaël JS Conf
Raphaël JS Conf
Raphaël JS Conf
Raphaël JS Conf
Raphaël JS Conf
Raphaël JS Conf
Raphaël JS Conf
Raphaël JS Conf
Raphaël JS Conf
Raphaël JS Conf
Upcoming SlideShare
Loading in...5
×

Raphaël JS Conf

10,422

Published on

Published in: Education
0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,422
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
150
Comments
0
Likes
23
Embeds 0
No embeds

No notes for slide

Raphaël JS Conf

  1. 1. Raphaël Dmitry Baranovskiy · JSConf 2010
  2. 2. How is it done?
  3. 3. SVG
  4. 4. VML
  5. 5. JavaScript SVG VML
  6. 6. SVG VML
  7. 7. 20 Kb
  8. 8. Anything, but charts?
  9. 9. Raphaël—JavaScript Library What is it? Download v. 1.3.1 (57 Kb) Raphaël is a small JavaScript library that should simplify your work with vector Our recommendation is to GZIP it. It graphics on the web. If you want to create your own specific chart or image crop will help to reduce file size to 20 Kb. and rotate widget, for example, you can achieve it simply and easily with this You can download uncompressed library. source (133 Kb) as well. 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 Documentation object, so you can attach JavaScript event handlers or modify them later. Hope it will help Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy. Discussion Group Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. Ask your questions there. For more examples take a look at charting plugin: gRaphaël. Twitter How to use it? Best source of updates, so far. Download and include raphael.js into your HTML page, then use it as simple Donate as: You know you want to… // Creates canvas 320 × 200 at 10, 50 var paper = Raphael(10, 50, 320, 200); It is Open // Creates circle at x = 50, y = 40, with radius 10 This project is distributed under MIT var circle = paper.circle(50, 40, 10); License. // Sets the fill attribute of the circle to red (#f00) circle.attr("fill", "#f00"); Source & Bugs
  10. 10. Raphaël—JavaScript Library What is it? Download v. 1.3.1 (57 Kb) Raphaël is a small JavaScript library that should simplify your work with vector Our recommendation is to GZIP it. It graphics on the web. If you want to create your own specific chart or image crop will help to reduce file size to 20 Kb. and rotate widget, for example, you can achieve it simply and easily with this You can download uncompressed library. source (133 Kb) as well. 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 Documentation object, so you can attach JavaScript event handlers or modify them later. Hope it will help Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy. Discussion Group Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. Ask your questions there. For more examples take a look at charting plugin: gRaphaël. Twitter How to use it? Best source of updates, so far. Download and include raphael.js into your HTML page, then use it as simple Donate as: You know you want to… // Creates canvas 320 × 200 at 10, 50 var paper = Raphael(10, 50, 320, 200); It is Open // Creates circle at x = 50, y = 40, with radius 10 This project is distributed under MIT var circle = paper.circle(50, 40, 10); License. // Sets the fill attribute of the circle to red (#f00) circle.attr("fill", "#f00"); Source & Bugs
  11. 11. Size does Matter
  12. 12. Printing
  13. 13. iPad
  14. 14. API
  15. 15. Creating
  16. 16. var paper = Raphael("holder", 800, 600); var paper = Raphael(holder, 800, 600); var paper = Raphael(10, 20, 800, 600);
  17. 17. Primitives
  18. 18. var circle = paper.circle(cx, cy, r); var rect = paper.rect(x, y, width, height, r); var ellipse = paper.ellipse(cx, cy, rx, ry);
  19. 19. 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
  20. 20. 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"); });
  21. 21. clip-rect height stroke-linecap cursor href stroke-linejoin cx opacity stroke-miterlimit cy path stroke-opacity fill r stroke-width fill-opacity rotation target font rx text-anchor font-family ry title font-size scale translation font-style src width font-weight stroke x gradient stroke-dasharray y
  22. 22. Paths &
  23. 23. var path = paper.path(pathString);
  24. 24. 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.507 l-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.23 5-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.0 02,0.043v45.292l0.08-0.038l1.109-0.168l1.834,0.86l1.024-0.723l1.748,0.305l2.12,0.2 48l1.73,1.44l0.492,2.009l1.092,0.971l0.045-0.953l1.055-0.539l0.98,0.232l1.721,0.11 9l1.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.853l 0.424-0.214l-0.424-1.276l-0.426,0.213l0.213-0.426l-0.854-0.213l1.49-0.64l0.427-1.4 91l-0.427-0.639l0.64-0.215v-1.489l1.703-1.703l-0.638-0.214l1.063-0.213l-1.276-0.42 6l1.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.85 3l-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.426l 0.638-0.426l0.215,0.426l0.853-1.277l1.489-0.853l0.214-1.702l-0.64-0.215v0.428l-0.8 52-0.428h1.064l0.213-1.49l1.49-1.277l1.918-6.176l-0.213-4.26l1.489-3.834l0.213-0.6 39l0.64-3.62l-0.64-0.426l0.64,0.213l-0.213-0.853l1.703-3.193h-0.426l0.426-0.214L27 8.939,132.632zM261.268,143.072h-0.215l-0.213-0.639l0.641-0.214L261.268,143.072z
  25. 25. M278.939,132.632l-0.641-0.853l0.183-1.97
  26. 26. Command M278.939,132.632l-0.641-0.853l0.183-1.97
  27. 27. Command M278.939,132.632l-0.641-0.853l0.183-1.97 x
  28. 28. Command M278.939,132.632l-0.641-0.853l0.183-1.97 x y
  29. 29. Plugins
  30. 30. 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}); };
  31. 31. gRaphaël
  32. 32. Everyone Can Draw
  33. 33. Thank You
  34. 34. http://raphaeljs.com/ http://github.com/DmitryBaranovskiy/raphael http://dmitry.baranovskiy.com/ http://twitter.com/raphaeljs
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×