Download - Bmore On Rails - Raphael Paths Intro
Brown
Raphal
http://github.com/VinylFox/JSMag/tree/master/2010/May
What is Raphal?
Miguel Rafael Martos Snchez
No, Really
We can make crooked lines
The Technology
SVG (the W3C standard)
VML (some other shit)
Browser Support
IE 6+
FF 3+
Safari 3+
Opera 9.5+
Chrome?
Why?
Two standards
Inconsistent API
No pixels
jQuery for Vector graphics
Using Raphal
var paper = Raphael('hangman', 600, 600);
paper.rect(1,1,50,20);
The Markup
VML:
SVG:
Using Raphal
var paper = Raphael('hangman', 600, 600);
paper.rect(1,1,50,20);
X & Y top left of rectangle
Using Raphal
var paper = Raphael('hangman', 600, 600);
paper.rect(1,1,50,20);
X & Y top left of rectangleWidth & HeightOf rectangle
Shapes
Rectangle
Circle
Ellipse
Path
Play Along
http://raphaeljs.com/playground.html
Rectangle
var paper = Raphael('hangman', 600, 600);
paper.rect(1,1,50,20,10);
X & Y top left of rectangleWidth & HeightOf rectangleCorner radius
Circle
var paper = Raphael('hangman', 600, 600);
paper.circle(100,100,50);
X & Y center Of circleRadius
Ellipse
var paper = Raphael('hangman', 600, 600);
paper.ellipse(100,120,50,100);
X & Y center Of ellipseRadius XRadius Y
Paths
var paper = Raphael('hangman', 600, 600);
paper.path('m 27.165,49.021 c 0.364,-0.299 0.768,-0.55 1.181,-0.773 0.355,-0.191 0.731,-0.333 1.121,-0.433 0.261,-0.067 0.529,-0.081 0.797,-0.061 0.134,0.01 0.645,0.271 0.435,-0.052 0.192,0.295 0.417,0.579 0.682,0.812 0.189,0.167 0.266,0.118 0.122,-0.103 -0.677,-1.039 -1.494,-1.971 -2.831,-1.78 -0.89,0.126 -1.785,0.676 -2.47,1.24 -0.128,0.105 0.83,1.259 0.963,1.15 l 0,0 z');
Move/Start pointM X Ycubic Bzier optionsMultiple control points and an end
Paths
var paper = Raphael('hangman', 600, 600);
paper.path('m 27.165,49.021 c 0.364,-0.299 0.768,-0.55 1.181,-0.773 0.355,-0.191 0.731,-0.333 1.121,-0.433 0.261,-0.067 0.529,-0.081 0.797,-0.061 0.134,0.01 0.645,0.271 0.435,-0.052 0.192,0.295 0.417,0.579 0.682,0.812 0.189,0.167 0.266,0.118 0.122,-0.103 -0.677,-1.039 -1.494,-1.971 -2.831,-1.78 -0.89,0.126 -1.785,0.676 -2.47,1.24 -0.128,0.105 0.83,1.259 0.963,1.15 l 0,0 z');
Move/Start pointM X Ycubic Bzier optionsMultiple control points and an endcubic BzierEnd pointcubic BzierConrol pointcubic BzierConrol point
Paths
var paper = Raphael('hangman', 600, 600);
paper.path('m 27.165,49.021 c 0.364,-0.299 0.768,-0.55 1.181,-0.773 0.355,-0.191 0.731,-0.333 1.121,-0.433 0.261,-0.067 0.529,-0.081 0.797,-0.061 0.134,0.01 0.645,0.271 0.435,-0.052 0.192,0.295 0.417,0.579 0.682,0.812 0.189,0.167 0.266,0.118 0.122,-0.103 -0.677,-1.039 -1.494,-1.971 -2.831,-1.78 -0.89,0.126 -1.785,0.676 -2.47,1.24 -0.128,0.105 0.83,1.259 0.963,1.15 l 0,0 z');
Move/Start pointM X Ycubic Bzier optionsMultiple control points and an endcubic BzierEnd pointcubic BzierConrol pointcubic BzierConrol pointcubic BzierEnd pointcubic BzierEnd pointcubic BzierConrol pointcubic BzierConrol point
Paths
var paper = Raphael('hangman', 600, 600);
paper.path('m 27.165,49.021 c 0.364,-0.299 0.768,-0.55 1.181,-0.773 0.355,-0.191 0.731,-0.333 1.121,-0.433 0.261,-0.067 0.529,-0.081 0.797,-0.061 0.134,0.01 0.645,0.271 0.435,-0.052 0.192,0.295 0.417,0.579 0.682,0.812 0.189,0.167 0.266,0.118 0.122,-0.103 -0.677,-1.039 -1.494,-1.971 -2.831,-1.78 -0.89,0.126 -1.785,0.676 -2.47,1.24 -0.128,0.105 0.83,1.259 0.963,1.15 l 0,0 z');
Move/Start pointM X Ycubic Bzier optionsMultiple control points and an endcubic BzierEnd pointcubic BzierConrol pointcubic BzierConrol pointcubic BzierEnd pointcubic BzierEnd pointcubic BzierConrol pointcubic BzierConrol pointClose path
Command Driven
M = Move to without drawing
L = Draw while moving to new point
H, V, Z are other straight line commands
Lowercase/Uppercase = Relative/Absolute
http://www.w3.org/TR/SVG/paths.html#PathData
M - Move
L - Line
H, V & Z
H Move horizontally only
V Move vertically only
Z Close path to start point
Straight Paths
var paper = Raphael('hangman', 600, 600);
paper.path('M 380,385 L 505,385 M 435,385 L 435,85 565,85 565,105');
Straight Paths
var paper = Raphael('hangman', 600, 600);
paper.path('M 380,385 L 505,385 M 435,385 L 435,85 565,85 565,105');
Move/Start pointM X Y
Straight Paths
var paper = Raphael('hangman', 600, 600);
paper.path('M 380,385 L 505,385 M 435,385 L 435,85 565,85 565,105');
Move/Start pointM X YLine toL X Y
Straight Paths
var paper = Raphael('hangman', 600, 600);
paper.path('M 380,385 L 505,385 M 435,385 L 435,85 565,85 565,105');
Move/Start pointM X YLine toL X Y
Move againM X Y
Straight Paths
var paper = Raphael('hangman', 600, 600);
paper.path('M 380,385 L 505,385 M 435,385 L 435,85 565,85 565,105');
Move/Start pointM X YLine toL X Y
Move againM X Y
Draw more linesL X,Y X,Y X,Y
Command Driven
C/S = Cubic Bzier curve
Q/T = Quadratic Bzier curve
A = Arc
Lowercase/Uppercase = Relative/Absolute
http://www.w3.org/TR/SVG/paths.html#PathData
Curved Paths
var paper = Raphael('hangman', 600, 600);
paper.path('M100,200 C100,50 350,50 350,200').attr({stroke:'#ff0000',"stroke-width":2});
paper.path('M110,200 C110,60 340,60 340,200').attr({stroke:'#00ff00',"stroke-width":2});
Curved Paths
var paper = Raphael('hangman', 600, 600);
paper.path('M100,200 C100,50 350,50 350,200').attr({stroke:'#ff0000',"stroke-width":2});
paper.path('M110,200 C110,60 340,60 340,200').attr({stroke:'#00ff00',"stroke-width":2});
Starting pointX Y
Curved Paths
var paper = Raphael('hangman', 600, 600);
paper.path('M100,200 C100,50 350,50 350,200').attr({stroke:'#ff0000',"stroke-width":2});
paper.path('M110,200 C110,60 340,60 340,200').attr({stroke:'#00ff00',"stroke-width":2});
Starting pointX Ycubic Bzier optionsTwo control points and an end
Text
var paper = Raphael('hangman', 600, 600);
paper.path('M100,200 C100,50 350,50 350,200').attr({stroke:'#ff0000',"stroke-width":2});
paper.path('M110,200 C110,60 340,60 340,200').attr({stroke:'#00ff00',"stroke-width":2});
paper.text(225,200,'Double Rainbow - whoa');
Control Points?
var paper = Raphael('hangman', 600, 600);
paper.path('M100,200 C100,50 350,50 350,200').attr({stroke:'#ff0000',"stroke-width":2});
paper.path('M110,200 C110,60 340,60 340,200').attr({stroke:'#00ff00',"stroke-width":2});
These little fuckers
Cubic Bzier control points
M100,200 C100,50 350,50 350,200
We can cheat
SVG
Export to SVG
Inkscape or Illustrator
Hide your kids, hide your wife
On to the live code demo...