Using vector graphics
Mathematical equations are at the heart of vector graphics. These equations are used to generate shapes via vector graphics. These shapes include points, lines, curves, circles, and any geometric shapes imaginable.
Now that we have an idea of the technology of Raphael, let's take a closer look at using it.
Using Raphael is as simple as placing one line in your page. The following SCRIPT element references the library installed on the Web server and makes the functionality available in the page:
var paper = Raphael(10, 50, 320, 200);
var circle = paper.circle(50, 40, 10);
This is a simple example that offers a great demonstration of the power provided by Raphael. The first line creates the canvas for the graphics with the paper variable. It uses the Raphael function, which defines the canvas or area of the page used to work with the graphics. The first two parameters set the starting point for our canvas: 10, 50. The final two parameters define the width and height of the canvas.
The second line creates a geometric circle via the circle method of the previously created instance of Raphael. The circle has a center point of 50, 40 with a radius of 10. The third line sets the fill attribute of the circle to the color specified by the hexadecimal value (which in this case is red). The final line sets the stroke attribute of our circle to white. This stroke attribute is the line around the outer edge of the circle.
Now we can extend the previous example to include multiple shapes. The following example places a rectangle (with rounded corners) inside our previous circle and places two smaller circles within the rectangle.
<title>Raphael Test 2</title>
var paper = Raphael(1, 1, 400, 400);
var circle = paper.circle(150, 140, 110);
var rect = paper.rect(100, 100, 100, 70, 10);
var circle2 = paper.circle(120, 125, 10);
var circle3 = paper.circle(140, 150, 10);
The objects are placed on the canvas in the order they are created in the script. So, the larger circle appears first, followed by the rectangle. The rectangle is placed on top of the circle. The final two small white circles appear last -- on top of the rectangle.
Looking at the numerous options
In addition to the circle and rectangle shapes included in the example, the Raphael library has more functionality to work with these shapes as well as others. The following list provides a sampling of these options.
- rotate: Allows you to rotate an element by a given degree.
- scale: Allows you to scale an element by the given number of times.
- toFront: Allows you to move a specific element to the front so that it appears on top of other elements.
- ellipse: Creates an ellipse shape.
- moveTo: Moves an element to another area of the canvas using coordinates passed to it.
- image: Allows you to embed an image in a given area of the canvas.
A full overview of Raphael's various options can be found on the Raphael site's reference page.
Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.
---------------------------------------------------------------------------------------------------------------Get weekly development tips in your inbox Keep your developer skills sharp by signing up for TechRepublic's free Web Developer newsletter, delivered each Tuesday. Automatically subscribe today!
Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a production environment on a daily basis.