Working with Path Items
In this tutorial we are going to look at paths and the different ways to create and modify them in Paper.js projects.
The Anatomy of Path Items
In Paper.js, paths are represented by a sequence of segments that are connected by curves. A segment consists of a point and two handles, defining the location and direction of the curves.
Adding and Inserting Segments
In order to start with paths here, we will use segments that do not define handles for now and therefore are connected by lines instead of curves.
Lets create a new path item by using the new Path() constructor and added segments to it using the path.add(segment) function:
The add function also supports multiple arguments, which allows you to insert multiple segments in one go:
To insert segments in relation to already existing segments, you can use the path.insert(index, segment) function:
The Point object represents a point in the two dimensional space of the Paper.js project. It does not refer to an anchor point in a path. When a Point is passed to a function like add or insert it is converted to a Segment on the fly. To find out more about the Point object, please read the Point, Size and Rectangle tutorial.
Paper.js allows you to automatically smooth paths using the path.smooth() function. This function calculates the optimal values for the handles of the path's segment points to create curves that flow smoothly through them. The segments are not moved and the current handle settings of the path's segments are ignored.
In the following example, we create a rectangle shaped path, create a copy of it and smooth the copy:
By default paths created through the new Path() constructor are open:
To close the path we set its path.closed property to true. Paper.js will then connect the first and last segments of the path:
Removing Segments and Paths
To remove a segment from a path, we use the path.removeSegment(index) function and pass it the index of the segment we want to remove.
If you don't know yet how to create paths of predefined shapes, please read the the Creating Predefined Shapes tutorial.
First, lets create a circle shaped path and inspect its segments:
As you can see, the path has 4 segments.
Now, lets remove the first segment of the path after creating it:
To remove an item completely from the project, we use item.remove():
var myCircle = new Path.Circle(new Point(100, 100), 50); myCircle.fillColor = 'black'; myCircle.remove();