In the last post, I listed 5 things you
can do with a Raphael element. They are:
- Create a Raphael element
- Manipulate the style of the element
- Transform the element
- Perform animations on the element
- Add JavaScript events to the element
Create a Raphael element
A circle can be
drawn using the Paper.circle(x, y, r) method in RaphaelJS. Its parameters are x, y
and radius. I must add that the coordinate system of computers uses
the top left corner of the viewport. On a computer this is the
location of the icon for a program.
For our first
example, we want to create a circle of radius 50 at the center of our
viewport is 500x500 px. The location of the circle is at 250 for both
x and y.
So in our
init.js file our code would look like this:
$(function(){ var paper = Raphael('container', 500, 500); | |
// Draw a circle at the center of the viewport | |
var circle = paper.circle(250, 250, 50); | |
}); |
And when we view
the result in the browser, we will see a circle at the center of the
grid. I have hosted this project on Dropbox although you can use
GitHub to do the same but for the purposes of this series, I will
host with Dropbox and use GitHub to allow you have a copy of the
code.
You can view the
result of the above code here.
So there you
have it. We have a basic circle with no styling whatsoever. Next we
can style it. From now on, I will only describe the output you should
see. I expect that you will open the link to the hosted version of
the code.
You can view the
code for this example on GitHub. Download a copy of the code and
unzip it. Next run the index.html in your browser. You should see the
same output as the hosted version.
Manipulate the style of the
element
The circle we have created has no styling whatsoever. We add styling to an element using the attr() method. In this section we will draw a circle with a red border of radius 10.
Our code looks like this:
$(function(){ var paper = Raphael('paper', 500, 500); | |
// Draw a circle at the center of the viewport | |
var circle = paper.circle(250, 250, 50); | |
// Style the circle | |
circle.attr({ 'stroke' : '#ff0000', 'stroke-width' : 10 }); | |
}); |
Transform the element
We have 3 type
of transformations we can carry out on an element. We can:
- Translate an element
- Scale an element
- Rotate an element
Because we are
dealing with a circle, I will skip rotation of an element. In order
to transform an element, we use the transform method.
Its syntax is
Element.transform([tstr]); Here, tstr is your transform string. The
transform string has 4 commands. They are: t for translate, r for
rotate, s for scale and m for matrix.
The capital form
of the transfom strings T, S, R and M are the absolute values.
Absolute means that they will not take previous transformation into
account when dealing with an element.
Translating a Circle
For our circle,
we shall move it to the right by 150 px. To illustrate this, I will
use the clone() method to create a clone of the circle based on our
original circle.
Our init.js now becomes:
$(function(){ var paper = Raphael('paper', 500, 500); | |
// Draw a circle at the center of the viewport | |
var circle = paper.circle(250, 250, 50); | |
// Outline the circle | |
circle.attr({ 'stroke' : '#ff0000', 'stroke-width' : 10 }); | |
// Create a clone of the circle | |
var circle_clone = circle.clone(); | |
// Transform the clone | |
circle_clone.transform("T150, 0") .attr({ 'stroke' : '#ff0000', 'stroke-width' : 10 }); | |
}); |
You can see that
the circle has shifted. I use the clone() function because it doesn't
take any parameters all we do is clone the circle and apply our
transformation to it. The clone() function is a neat way of creating
an exact copy of an element in RaphaelJS.
Scaling a Circle
Here we will
scale the original circle. All we need to is apply a transformation
on the original circle. The letter used to do this is the S. I will
increase the size of the circle by 2.
This is the code
to do it:
$(function(){ var paper = Raphael('paper', 500, 500); | |
// Draw a circle at the center of the viewport | |
var circle = paper.circle(250, 250, 50); | |
// Outline the circle | |
circle.attr({ 'stroke' : '#ff0000', 'stroke-width' : 10 }); | |
// Create a clone of the circle | |
var circle_clone = circle.clone(); | |
// Transform the clone | |
circle_clone.transform("T150, 0") .attr({ 'stroke' : '#ff0000', 'stroke-width' : 10 }); | |
// Increase the size of the circle | |
circle.transform("S2"); | |
}); |
Perform animations on the element
The animate
method in RaphaelJS has the following syntax:
Element.animate({parameters
for animation}, number of milliseconds for animation to run, easing,
callback function);
Only the
animation parameters and the number of milliseconds for the animation
to run are necessary.
We are going to
make the circle increase in size by 3 over a period of 3000
milliseconds or 3 seconds.
The code to do
this is given below:
$(function(){ var paper = Raphael('container', 500, 500); | |
// Draw a circle at the center of the viewport | |
var circle = paper.circle(250, 250, 50); | |
// Outline the circle | |
circle.attr({ 'stroke' : '#ff0000', 'stroke-width' : 10 }); | |
/* Increase the circle to 3 times its size over 3 seconds */ | |
circle.animate({ | |
transform:"s3" | |
}, 3000); | |
}); |
Add JavaScript events to the
element
We are going to
create a flashing light whenever we hover on the circle. The hover
syntax is given below:
Element.hover(f_in,
f_out, [icontext], [ocontext]);
f_in is the
function that is called when we hover in
f_out is the
function that is called when we hover out
We replace our animate code and we have the following init.js file:
$(function(){ var paper = Raphael('container', 500, 500); | |
// Draw a circle at the center of the viewport | |
var circle = paper.circle(250, 250, 50); | |
// Outline the circle | |
circle.attr({ 'stroke' : '#ff0000', 'stroke-width' : 10 }); | |
/* Increase the circle to 3 times its size over 3 seconds */ | |
circle.hover(function(){ | |
this.animate({ | |
fill: '#FFFFFF' | |
}, 300); | |
}, function(){ | |
this.animate({ | |
fill: '#ff0000' | |
}, 300); | |
}); | |
}); |
Conclusion
In this section
we have covered how to work with circles in RaphaelJS. I have gone
through basic examples showing how this works.
In the next
section, we shall start working on ellipses.Thank you for joining me on this series of SVG with RaphaelJS and have a great new month in March.