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...