Friday 13 March 2015

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

Welcome to this section of the weekly series SVG with RaphaelJS. This week will we continue our creation of basic shapes with RaphaelJS by working with rectangles.

The rectangle method is simple in itself. It draws a rectangle on the screen. Let's remember that a square is a special case of a rectangle where the width = height. So if we wanted to draw a rectangle, we would ensure that our height and width are equal.

The actual syntax to do this is;

Paper.rect(x, y, width, height, [r])

As shown above, we use the rect() method to create a rectangle. [r] is an optional parameter that represents the border radius. This parameter allows us create a rectangle with a rounded edge.

Our init.js in this case thus becomes:

$(function(){ var paper = Raphael('container', 500, 500);
// Draw a red rectangle
var rectangle = paper.rect(100, 100, 200, 100).attr("fill", "red");
});
The above code draws a red rectangle on the grid. You can view the output here. The GitHub repository can be found here.

To create a rectangle with a rounded corner of 40, our init.js becomes:

$(function(){ var paper = Raphael('container', 500, 500);
// Draw a rectangle with rounded corners
var rectangle = paper.rect(100, 100, 200, 100, 40).attr("fill", "red");
});

You can view the result here.

So far we have covered the basic elements in RaphaelJS. With what we have done so far, you should have some ideas running through your head. Stop a while and write them down. Let your imagination run free in this regard.

That was how I started on the journey of using SVG. Along the line, I met people who encouraged me to bring me ideas to life by offering advice and the rest the say is history.

In the next section of this series SVG with RaphaelJS, we shall be looking at paths. Paths are complex shapes that truly show the power of SVG. See you next week.


Friday 6 March 2015

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

Welcome to this section of the weekly series SVG with RaphaelJS. This week we will be working with ellipses. Last week we took a comprehensive look at working with circles in RaphaelJS.

I must add that the repository for this series can be found here. Please download it and run the individual examples if you want to follow along in this series. From this week henceforth, I will only link to the specify example in my Dropbox folder. If you want a copy of the code, please download it from the GitHub repository.

In RaphaelJS, we create an Ellipse using the ellipse() method. The syntax of this is Paper.ellipse(x, y, rx, ry) where x and y represent the position of the ellipse on the paper while rx and ry represent the horizontal radius and the vertical radius of the ellipse respectively.

The horizontal radius is the width of the ellipse divided by 2 while the vertical radius is the height of the ellipse divided by two.

The code to create an ellipse at the middle of our paper is given below (ellipse):


$(function(){ var paper = Raphael('container', 500, 500);
var ellipse = paper.ellipse(250, 250, 100, 50);
});

You can view the result here.

So there you have it. An ellipse in all its glory. Its your basic ellipse with no styling at all.

For the sake of review, let's change its fill, stroke and make its stroke-width 2. Our init.js thus becomes:


$(function(){ var paper = Raphael('container', 500, 500);
var ellipse = paper.ellipse(250, 250, 100, 50).attr({
"fill":"#FF0000",
"stroke":"#FF0000",
"stroke-width":2
});
});

You can view the result here.

Animating the Ellipse

We are going to write code to animate the ellipse to a circle. So before your very eyes, an ellipse would change into a circle. The trick is to understand that a circle is a special case of an ellipse where rx = ry.

Our init.js thus becomes:


$(function(){ var paper = Raphael('container', 500, 500);
var ellipse = paper.ellipse(250, 250, 100, 50).attr({
"fill":"#FF0000",
"stroke":"#FF0000",
"stroke-width":2
});
ellipse.animate({
ry: 100,
transform:"s2"
}, 5000);
});

Its pretty cool watching the ellipse grow into a circle and increase in size. You can check it out here.

Add JavaScript events to the element

In order to get your element to be used to visit another website, you need to use the href function. The anchor tag <a> in HTML is where the href function is used. However, in this case, we shall use it with the document.

Our init.js thus becomes:


$(function(){ var paper = Raphael('container', 500, 500);
var ellipse = paper.ellipse(250, 250, 100, 50).attr({
"fill":"#FF0000",
"stroke":"#FF0000",
"stroke-width":2,
"href": "http://trustondevcenary.com",
"target": "blank"
});
/* ellipse.click(function(){
document.location.href = "http://trustondevcenary.com";
}); */
});

You can view the result here.

When we click on the ellipse, it directs us to my portfolio page. This is a simple way to visit a website from an element on your page when the element is clicked.

The commented out section shows a previous attempt at linking to the site. The advantage with the method I originally chose is that it opens the page in a new tab.

A note on my portfolio website. When you visit my portfolio website and you check out the portfolio section, do click on the project represented by the map of Africa on it. Countries in Africa is the reason I believe I am qualified to teach you about SVG using RaphaelJS.

I developed the first version of Countries in Africa in 2013. You can read about it here. Last week was when I finished the current version on my portfolio website after a 1 year hiatus from coding the project.

All told, the first version took me 6 months to complete. In those 6 months, I scoured the internet for almost everything I could find on RaphaelJS. In the end, I was successful in completing the project.

In the next section, we shall look at how to work with rectangles in RaphaelJS.