SVG with RaphaelJS - Creating Basic Shapes - Drawing Circles with RaphaelJS

Last week's post provided the ground work for this series. This week, we will delve into code. We are going to start by drawing a circle with RaphaelJS. Yes basic stuff but at the end of the day, when we start applying the concepts, it becomes really exciting.

In the last post, I listed 5 things you can do with a Raphael element. They are:

1. Create a Raphael element
2. Manipulate the style of the element
3. Transform the element
4. Perform animations on the element
5. Add JavaScript events to the element

For the circle, we are going to only carry out all the above steps. So without much ado, let's get started.

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 });
	});

You can view the changed output on Dropbox or get the code from GitHub.

Transform the element

We have 3 type of transformations we can carry out on an element. We can:

1. Translate an element
2. Scale an element
3. 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 view the output of this code here or get the code from GitHub.

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");
	});

You can view the output of this here or get the code from GitHub.

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);
	});

You can view the output of this here or get the code from GitHub.

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);
	});
	});

You can view the output of this here or get the code from GitHub.

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.