Paths and curves in Raphael JS Vector Graphics

Exclusive offer: get 50% off this eBook here
Learning Raphaël JS Vector Graphics

Learning Raphaël JS Vector Graphics — Save 50%

Over 70 code examples to create vector graphics and data visualizations! with this book and ebook

$14.99    $7.50
by Damian Dawber | September 2013 | Open Source

The ability to draw and manipulate paths is an extremely powerful feature of Raphaël. Paths allow us to draw all manner of shapes by defining points connected by lines, arcs, and curves. In this article by Damian Dawber, author of Learning Raphaël JS Vector Graphics, you will learn the properties and the method of drawing a quadratic Bézier curve.

(For more resources related to this topic, see here.)

Path drawing concepts

The process of drawing with a pen on paper can be broken down into the following steps:

  1. You place your pen at a particular point on a piece of paper.
  2. You press and move the pen freely from this point to another point.
  3. You keep your pen at this point or lift up the pen and place it at another point on the paper.
  4. he process is repeated until you have finished drawing.

Path drawing works in much the same way. The point at which you place your pen, known as the current point, defines the start of a path while the free movement of the pen describes the path itself.

Consider drawing an arbelos shape. We first place our pen at a point (100, 180) on our canvas and draw an arc to the point (380, 180) as shown:

We then create an arc from the point (380, 180) to the point (200, 180):

Finally, we create an arc back to the point (100, 180) to complete the path:

The example of the arbelos demonstrates the drawing of a single path, where we did not lift up the pen at any point during the drawing process. Were we to lift up the pen, the subsequent drawing would technically create subpaths on the main path element. In the example, creating a triangle as a subpath has the effect of adding to our single path element. Notice also that the fill attribute is applied to the overall path rather than individual subpaths:

Drawing Curves

There are three types of curve path: quadratic Bézier curves, cubic Bézier curves, and arcs. Bézier curves are curves defined between a start and end point but whose direction we can determine by using control points.

Drawing quadratic Bézier curves

A quadratic Bézier curve is a curve between two points with a single control point. To appreciate how quadratic Bézier curves are drawn, you should experiment with the animated demo at http://www.jasondavies.com/animated-bezier/. As shown here, the curve is drawn from a point P0 to a point P2 with a control point P1. The control point P1 relative to P0 and P2 determines the extent to which the curve bends: from start to finish, the curve starts off heading in the direction of the control point P1 and then bends towards the end point P2 from the direction of P1.

There are two quadratic Bézier curve commands, the syntax for which is given here:

Command

Parameters

Example

Q or q

(x1, y1, x, y)+

Q 100 50 200 250

T or t

(x y)+

T 400 250

The Q command (or q for relative points) describes a curve drawn from the current point on a path to the point (x, y) using (x1, y1) as a control point. For example, consider the following code:

paper.path(['M', 50, 150, 'Q', 225, 20, 400, 150]);

This draws the quadratic Bézier curve shown. The equivalent path using the lowercase variant of the command would be "M 50,150 q 175,-130 350,0", where the (x, y) and (x1, y1) parameters are the relative distances from the start point (50, 100):

Moving the control point affects the way that the path is drawn. For example, the path "M 50, 150 Q 100,40 400,150" is shown as:

As with the other commands we have encountered so far, parameters can be repeatable, which allows us to draw multiple connected quadratic Bézier curves. Consider the following code:

paper.path([
'M', 50, 150
'Q', 225, 20, 400, 150,
575, 20, 750, 150
]);

This has the effect of drawing a second curve from (400, 150) to the point (750, 150) with a control point at (575, 20):

The T or t command is shorthand whereby the control point coordinates are not specified. Instead, the control point is determined automatically as a reflection of the previous control point. Consider the path drawn by the following code:

paper.path([
'M', 50, 150,
'Q', 225, 20, 400, 150,
'T', 750, 150
]);

This creates two curves as shown in the following screenshot. The current point at the start of the path drawn by T is (400, 150). Relative to this point, a reflection of the previous control point (225, 20) is (575, 280):

Summary

In this article we have successfully covered a quadratic Bézier curve.

Resources for Article:


Further resources on this subject:


Learning Raphaël JS Vector Graphics Over 70 code examples to create vector graphics and data visualizations! with this book and ebook
Published: May 2013
eBook Price: $14.99
Book Price: $29.99
See more
Select your format and quantity:

About the Author :


Damian Dawber

Damian Dawber is a web developer working on medium- to large-scale e-commerce websites and bespoke web and mobile applications. He works with both frontend and server-side technologies having had exposure to a wide range of projects working on behalf of small and medium enterprises through to FTSE 100 companies.

He started his career after being exposed to programming as it used to solve problems in physics and decided he wanted to write code on a daily basis thereafter.

Books From Packt


 Instant RaphaelJS Starter [Instant]
Instant RaphaelJS Starter [Instant]

Ext JS 4 First Look
Ext JS 4 First Look

Sencha Touch Mobile JavaScript Framework
Sencha Touch Mobile JavaScript Framework

Android 3.0 Animations: Beginner’s Guide
Android 3.0 Animations: Beginner’s Guide

Instant HTML5 2D Platformer [Instant]
Instant HTML5 2D Platformer [Instant]

Sencha Touch Cookbook
Sencha Touch Cookbook

 Ext JS 4 Plugin and Extension Development
Ext JS 4 Plugin and Extension Development

Blender 3D Basics
Blender 3D Basics


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
3
F
4
9
A
z
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software