Creates a new Path item and places it at the top of the active layer.
Example — Create an empty path and add segments to it:
var path = new Path(); path.strokeColor = 'black'; path.add(new Point(30, 30)); path.add(new Point(100, 100));
Example — Create a path with two segments:
var segments = [new Point(30, 30), new Point(100, 100)]; var path = new Path(segments); path.strokeColor = 'black';
The first Segment contained within the path.
The last Segment contained within the path.
The first Curve contained within the path.
Specifies whether the path is closed. If it is closed, Paper.js connects the first and last segments.
Example
Specifies whether an path is selected and will also return true if the path is partially selected, i.e. one or more of its segments is selected.
Paper.js draws the visual outlines of selected items on top of your project. This can be useful for debugging, as it allows you to see the construction of paths, position of path curves, individual segment points and bounding boxes of symbol and raster items.
See also: project.selectedItems, segment.selected, point.selected
Example — Selecting an item:
Example — A path is selected, if one or more of its segments is selected:
Specifies whether all segments of the path are selected.
Example — A path is fully selected, if all of its segments are selected:
Adds one or more segments to the end of the segments array of this path.
Example — Adding segments to a path using point objects:
Example — Adding segments to a path using arrays containing number pairs:
Example — Adding segments to a path using objects:
Example — Adding a segment with handles to a path:
Inserts one or more segments at a given index in the list of this path's segments.
Example — Inserting a segment:
Example — Inserting multiple segments:
Adds an array of segments (or types that can be converted to segments) to the end of the segments array.
Example — Adding an array of Point objects:
Example — Adding an array of [x, y] arrays:
Example — Adding segments from one path to another:
Inserts an array of segments at a given index in the path's segments array.
Removes the segments from the specified 'from' index to the specified 'to' index from the path's segments array.
Example — Removing segments from a path:
Converts the curves in the path to straight lines.
Example — Straightening the curves of a circle:
Example — Click and drag below to draw to draw a line, when you release the mouse, the is made smooth using path.pointsToCurves():
Joins the path with the specified path, which will be removed in the process.
Example — Joining two paths:
Example — Joining two paths that share a point at the start or end of their segments array:
Example — Joining two paths that connect at two points:
Get the point on the path at the given offset.
Example — Finding the point on a path at a given offset:
Example — Iterating over the length of a path:
Get the tangent to the path at the given offset as a vector point.
Example — Working with the tangent vector at a given offset:
Example — Iterating over the length of a path:
Get the normal to the path at the given offset as a vector point.
Example — Working with the normal vector at a given offset:
Example — Iterating over the length of a path:
Smooth bezier curves without changing the amount of segments or their points, by only smoothing and adjusting their handle points, for both open ended and closed paths.
Example — Smoothing a closed shape:
Example
Draws a curve from the position of the last segment point in the path that goes through the specified through point, to the specified to point by adding one segment to the path.
Example — Interactive example. Click and drag in the view below:
Draws an arc from the position of the last segment point in the path that goes through the specified through point, to the specified to point by adding one or more segments to the path.
Example
Example — Interactive example. Click and drag in the view below:
Draws an arc from the position of the last segment point in the path to the specified point by adding one or more segments to the path.
Example
Example — Interactive example. Click and drag in the view below:
Adds a segment relative to the last segment point of the path.
Example
Example — Drawing a spiral using lineBy:
Closes the path. When closed, Paper.js connects the first and last segments.
See also: closed
The name of the item. If the item has a name, it can be accessed by name through its parent's children list.
Example
The item's position within the project. This is the rectangle.center of the item's #bounds rectangle.
Example — Changing the position of a path:
Example — Changing the x coordinate of an item's position:
Specifies whether the item is visible. When set to false, the item won't be drawn.
Example — Hiding an item:
Specifies whether the item defines a clip mask. This can only be set on paths, compound paths, and text frame objects, and only if the item is already contained within a clipping group.
The blend mode of the item.
Example — Setting an item's blend mode:
The opacity of the item as a value between 0 and 1.
Example — Making an item 50% transparent:
The item that this item is contained within.
Example
var path = new Path(); // New items are placed in the active layer: console.log(path.parent == project.activeLayer); // true var group = new Group(); group.appendTop(path); // Now the parent of the path has become the group: console.log(path.parent == group); // true
The first item contained within this item. This is a shortcut for accessing item.children[0].
The next item on the same level as this item.
The previous item on the same level as this item.
The bounding rectangle of the item including stroke width.
The width of the stroke.
Example — Setting an item's stroke width:
The shape to be used at the corners of paths when they have a stroke.
Example — A look at the different stroke joins:
The miter limit of the stroke.
When two line segments meet at a sharp angle and miter joins have been specified for item.strokeJoin, it is possible for the miter to extend far beyond the item.strokeWidth of the path. The miterLimit imposes a limit on the ratio of the miter length to the item.strokeWidth.
Removes the item from the project. If the item has children, they are also removed.
Removes all of the item's #children (if any).
When passed a project, copies the item to the project, or duplicates it within the same project. When passed an item, copies the item into the specified item.
Reverses the order of the item's children
Rasterizes the item into a newly created Raster object. The item itself is not removed after rasterization.
Example — Rasterizing an item:
Checks if the item contains any children items.
Checks if this item is above the specified item in the stacking order of the project.
Checks if the item is below the specified item in the stacking order of the project.
Checks whether the specified item is the parent of the item.
Checks whether the specified item is a child of the item.
Checks if the item is contained within the specified item.
Checks if the item is an ancestor of the specified item.
Checks whether the item is grouped with the specified item.
Scales the item by the given value from its center point, or optionally from a supplied point.
Example — Scaling an item from its center point:
Example — Scaling an item from a specific point:
Scales the item by the given values from its center point, or optionally from a supplied point.
Example — Scaling an item horizontally by 300%:
Translates (moves) the item by the given offset point.
Rotates the item by a given angle around the given point.
Angles are oriented clockwise and measured in degrees.
See also: matrix.rotate
Example — Rotating an item:
Example — Rotating an item around a specific point:
Shears the item by the given value from its center point, or optionally by a supplied point.
See also: matrix.shear
Shears the item by the given values from its center point, or optionally by a supplied point.
See also: matrix.shear
Transform the item.
Inserts the specified item as a child of the item by appending it to the list of children and moving it above all other children. You can use this function for groups, compound paths and layers.
Inserts the specified item as a child of this item by appending it to the list of children and moving it below all other children. You can use this function for groups, compound paths and layers.
Moves this item above the specified item.
Moves the item below the specified item.
Removes the item when the events specified in the passed object literal occur.
The object literal can contain the following values:
Remove the item when the next tool.onMouseMove event is fired: object.move = true
Remove the item when the next tool.onMouseDrag event is fired: object.drag = true
Remove the item when the next tool.onMouseDown event is fired: object.down = true
Remove the item when the next tool.onMouseUp event is fired: object.up = true
Example — Click and drag below:
Removes the item when the next tool.onMouseMove event is fired.
Example — Move your mouse below:
Removes the item when the next tool.onMouseDown event is fired.
Example — Click a few times below:
Removes the item when the next tool.onMouseUp event is fired.
Example — Click a few times below:
Copyright © 21011 Jürg Lehni & Jonathan Puckey. All Rights Reserved.