Raphael-js-tutorial-part-II

This is second part of the tutorial about getting started with Raphael.js. To see this first part go here.

Writing Text with Raphael

Some code first ;)
var canvas = Raphael(0, 0, 250, 250 );

var t = canvas.text(50, 50, "Some text Goes here");

var t2 = canvas.text(60,90,"First line \n Second Line \n Third line");

var t3 = canvas.text(214, 140, "1079").attr({"text-anchor":"middle",'font-size':16,"font-family":"arial","fill":"#fff"});

In the above examples canvas.text will create a simple text element at 50,50. Strangely VML /SVG do not have Line breaks therefore the programmer is responsible for creating new lines,in most cases appending '\n' does the trick.

While styling your text ,attribute text-anchor is quite important, it defaults to 'middle' but can be changed to start and end as well.

Default Attributes Styling and adding Custom Attributes

Raphael honors SVG Attribute Specification and lets the user customize them by attr() method.

canvas = Raphael(0, 0, 250, 250 );
// Creates circle at x = 125, y = 125, with radius 50
var circle = canvas.circle(125, 125, 50);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "blue");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

Animation

The library comes with an animate function which is perhaps one of my favorite implementation, its simple easy and packs a big punch.

Animation is a basically a process of fiddling with the attributes of a vector in a timed routine, so lets say that we have a circle i.e

var circle  =  canvas.circle(125,125,50)

i.e. a circle with its center at 125,125 and radius 50 , so I want to animate the radius of the circle to say 25, I will simply do this


var anim = Raphael.animation({r:25}, 1000);

circle.animate(anim);
There are some helper methods built in like
circle.animate(anim.delay(500)); // run the given animation after 500 ms
or circle.animate(anim.repeat(Infinity)); One can also pass in a easing functions, like this
var anim = Raphael.animation({r:25,fill:"red"}, 1000,"bounce");
Check out more easing functions here 

Finally I will add a custom widget which I animated from my last example in the first part.

admin

Raphael-js-tutorial-part-II  by  admin