Here, we will create the first shape in Raphael in two simple steps.
Initializing a Raphael object is as simple as munching a banana, and there are two ways to munch.
It can either be created directly in the browser's viewport (viewable area) or in an element. It's usually advisable to create the Raphael object in an element, probably a Div tag. It's important to keep in mind that the paper (drawing area) is the boundary of the x, y grid, not the browser's window.
The syntax for creating the Raphael object, which is the base for all other Raphael methods and functions, is as follows:
var raphaelObj = Raphael(x,y,width,height);
The four parameters inside the Raphael function are nothing but x-position, y-position, width, and height of the canvas to be created.
Since it is created in the browser's viewport, the positioning of the canvas will be absolute; therefore, it will overlap any HTML element underneath.
For example:
// Creating the canvas in the browser's viewport var paper = Raphael(20, 30, 650, 400);
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
Here the Raphael object is initialized and assigned to a variable called paper. This variable will be christened with all the powers of RaphaelJS. It will, henceforth, become the Raphael Paper Object.
To initiate the Raphael object inside an element, we must add the element ID or the element itself in the place of the positioning coordinates (x, y).
Let's consider the following example:
//The element itself is passed
//This line creates a Raphael paper inside 'paperDiv', which is 650px in width and 400px in height
var elm= document.getElementById("paperDiv");
var paper = Raphael(elm, 650, 400);
//or
// The element ID is passed directly
//This line also creates a Raphael paper inside 'paperDiv', which is 650px in width and 400px in height
var paper = Raphael("paperDiv", 650, 400);That's it; we now have the engine up and running.
Vrooom vrooom.
It is now time to shift gears.
The moment we assigned the Raphael object to the variable paper, it transforms itself into a magic wand, allowing us to pull off tricks to the best of our imagination.
There are certain predefined methods to create basic geometrical shapes such as circles, rectangles, and ellipses. Now we are going to spell out a circle with our shiny new wand.
A circle can be drawn using the circle() method. This method takes three parameters, namely x, y, and radius. Assign it to a variable that allows us to use it later in the code, specifically, to access the vector object easily for animations, transformations, and other effects.
The syntax is as follows:
var cir = paper.circle(x,y,r); // x and y are the positioning co-ordinates, and "r" is the radius of the circle //Here the circle is assigned to a variable called cir. //Example var cir = paper.circle(35,25,20); // This will create a circle of 20 pixels in radius at 35,25 (X & Y axis).
The output for the preceding code is as shown in the following screenshot:
A circle created using RaphaelJS
We now have a smooth circle. It's absolutely fantastic, but wouldn't it be much better if we could add some color and other styles to it? RaphaelJS gives us the option to add styles to the object. It's a fairly straightforward method.
Styles and other customizations to our new circle are done using the attr() method.
This method takes the properties as parameters. The properties are entered as a collection of objects in key-value pairs. If you are familiar with jQuery, then its syntax is identical to jQuery's attr() method. This format is known as JavaScript Object Notation (JSON), to further clarify.
The syntax for this method is as follows:
element.attr({
"Property1":value1,
"Property2":value2
})Let's consider the following example:
//adding the attributes as key value pair
var coloredCircle = paper.circle(35,25,20).attr({
"fill":"#17A9C6",
"stroke":"#2A6570",
"stroke-width":2
});The output for the preceding code snippet is as shown in the following screenshot:
A circle with styles applied using the attr() method
Raphael's paper allows easy integration of vector graphics in an HTML layout, which makes it even more appealing.
Paper—the shiny new wand.