Class: Path

PD.SVG. Path

Generates a path using commands based on the SVG path definition.


new Path( [path])

Describes a scaled horizontal or vertical axis for an SVG chart.

Parameters:
Name Type Argument Description
path string <optional>

An optional string containing the path data usually stored by the d attribute.

Author:
  • drajmarsh
See:

Members


:string

d

Holds the path string being constructed.

Type
  • string

Methods


bezierCurveTo()

Draws a quadratic Bézier curve.

The curve goes from the current point to (x,y), using (x1,y1) as the control point. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

Returns:

Returns this path to support method chaining.

Type
PD.SVG.Path

clear()

Clears the current path ready to create a new one.

Returns:

Returns this path to support method chaining.

Type
PD.SVG.Path

close()

Close the current subpath by connecting it back to it's initial point.

Since absolute (Z) and relative (z) commands take no parameters, they have the identical effect.

Returns:

Returns this path to support method chaining.

Type
PD.SVG.Path

curveTo()

Draws a cubic Bézier curve.

The curve goes from the current point to (x,y), using (x1,y1) as the control point at the beginning of the curve, and (x2,y2) as the control point at the end of the curve.

Multiple sets of 6 coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

Returns:

Returns this path to support method chaining.

Type
PD.SVG.Path

ellipticalArc()

Draws an elliptical arc from the current point to (x, y).

The size and orientation of the ellipse are defined by two radii (rx, ry) and an x-axis-rotation, which indicates how the ellipse as a whole is rotated, in degrees, relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters.

Large_arc_flag and Sweep-flag contribute to the automatic calculations and help determine how the arc is drawn.

Returns:

Returns this path to support method chaining.

Type
PD.SVG.Path

end()

Converts the path into a string suitable for the d attribute of a path.

This is effectively an alias for the toString method.

Returns:

Returns the created path as a string.

Type
string

lineTo()

Adds a line to the new current position.

The line goes from the current point to the given (x,y) coordinate, which becomes the new current point.

A number of coordinates pairs may be specified to draw a polyline. At the end of the command, the new current point is set to the final set of coordinates provided.

To illustrate further, path.lineTo(x1, y1, x2, y2, x3, y3) is fundamentally the same as path.lineTo(x1, y1).lineTo(x2, y2).lineTo(x3, y3).

Returns:

Returns this path to support method chaining.

Type
PD.SVG.Path

lineToX()

Adds a horizontal line to the new X axis position.

Draws a horizontal line from the current point along the X-axis to the given value. After this command, the new current point is taken from the final coordinate value.

This method does not take multiple arguments. Whilst you can chain multiple horizontal lines together, this is not often better than just a single line.

Returns:

Returns this path to support method chaining.

Type
PD.SVG.Path

lineToY()

Adds a vertical line to the new X axis position.

Draws a vertical line from the current point along the Y-axis to the given value. After this command, the new current point is taken from the final coordinate value.

This method does not take multiple arguments. Whilst you can chain multiple vertical lines together, this is not often better than just a single line.

Returns:

Returns this path to support method chaining.

Type
PD.SVG.Path

moveTo()

This starts a new sub-path at the given (x,y) coordinates.

If a moveTo is followed by multiple pairs of coordinates, the subsequent pairs are treated as implicit lineTo commands. Hence, implicit lines will be relative if the move is relative, and absolute if the move is absolute.

If a relative moveTo (m) appears as the first element of the path, then it is treated as a pair of absolute coordinates. In this case, subsequent pairs of coordinates are treated as relative even though the initial move is interpreted as an absolute move.

To illustrate further, path.moveTo(x1, y1, x2, y2, x3, y3) is fundamentally the same as path.moveTo(x1, y1).lineTo(x2, y2).lineTo(x3, y3).

Returns:

Returns this path to support method chaining.

Type
PD.SVG.Path

relative( [state])

Defines the command immediately following as relative coordinates.

Parameters:
Name Type Argument Description
state boolean <optional>

An optional state, defaults to true.

Returns:

Returns this path to support method chaining.

Type
PD.SVG.Path

smoothBezierCurveTo()

Draws a quadratic Bézier curve from the current point to (x,y).

The control point is assumed to be the reflection of the control point on the previous command relative to the current point. If there is no previous command or if the previous command was not a Q, q, T or t, assume the control point is coincident with the current point.

At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

Returns:

Returns this path to support method chaining.

Type
PD.SVG.Path

smoothCurveTo()

Draws a smoothed cubic Bézier curve.

The curve goes from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. If there is no previous command or if the previous command was not an C, c, S or s, the first control point is assumed coincident with the current point. (x2,y2) is the second control point at the end of the curve.

Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

Returns:

Returns this path to support method chaining.

Type
PD.SVG.Path

toString()

Converts the path into a string suitable for the d attribute of a path.

Returns:

Returns the created path as a string.

Type
string