Path is a JavaScript object that allows you to interactively manipulate a path via Handle objects. The Path object is a container of path segment objects. This object will act as a single SVG element; however, methods called on this object will result in calls to all path segments managed by this object. Currently, the following path segments have been defined:
This code is used in the 2D Geometry section of this site.
constructor - new Path(svgNode);
This method creates a new Path object. All initialization is handled by the init() method. All parameters for this method are described below.
init() initialized all properties for this object. The path element's data attribute is parsed by the parseData() method in this class. parseData() creates an array of path segments, one for each command type in the path data. Handles are created by each path segment as is appropriate to that segment.
svgNode is an SVG circle element that is to be managed by this object.
realize() constructs the SVG DOM nodes needed to visualize the handles of this widget. Event listeners are registered as needed to implement this object's functionality.
refresh() applies the handle positions to the SVG element associated with this object.
registerHandles() adds all handles used by this object to the mouser's handle list.
unregisterHandles() removes all handles used by this object from the mouser's handle list.
selectHandles() set the current select value for all handles used by this object.
showHandles() sets the current visibility value for all handles used by this object.
parseData() converts the path data attribute to corresponding path segment objects: one for each path segment. Any syntax errors in the path data will result in an Exception stating what problem was encountered.
tokenize() converts the path data into an array of tokens. Any lexical errors in the path data will result in an Exception being thrown by this method.
getIntersectionParams() : IntersectionParams;
This method returns an IntersectionParams object to specify this shape's name and the necessary parameters to find the intersection of this shape with another. The name is used by the Intersection object to determine which intersection routine to call.
COMMAND - a number used to indicate that a token is a path command
NUMBER - a number used to indicate that a token is a number
EOF - a number used to indicate that a token is the last in a stream of tokens
PARAMS - an object with a property for each path command. The value of the property is an array of parameter names for the corresponding path command.
This example allows you to adjust path elements within the SVG document. The curves below consist of the following path segments: Moveto, Lineto, Quadratic Bezier, and Cubic Bezier. Here is a brief summary of the editing procedures:
Path.js - the path object only...cannot be used in isolation
2D.js.gz - all objects needed to use this object and other 2D geometry objects