Create the JPath
object with the jpaths()
method
How to create a JPath
object:
// create an empty path
var path = jpaths();
// create a path with init path string
var path = jpaths('M0,0h3v3z');
Append standard commands (according to SVG Path Commands)
var path = jpaths();
// append command and param directly
path.append('M', 0, 0);
// append command string
path.append('M0,0');
// array-style path segment(s)
path.append(['M', 0, 0])
path.append([['M', 0, 0], ['L', 0, 0]])
* You can checkout the appendix table for commands jpaths supports
You can extend your shape by jpaths.define()
easily
// define the `rect` shape
jpaths.define('rect', function(params) {
if (params.length != 2) throw new Error('The rect command should have 2 parameters');
var dx = params.shift();
var dy = params.shift();
return ['h', dx, 'v', dy, 'h', -dx, 'v', -dy, 'z'];
});
// append the `rect` shape
var path = jpaths();
path.append('M', 100, 100);
path.append('rect', 40, 30); // path.toString() will be 'M100,100h40v30h-40v-30z'
The JPath
object can convert to different representations
Convert the JPath
object to a standard SVG path string. Any drawing define will be converted.
var path = jpaths(['M', 0, 0, 'R', 10, 0, 0, 10, 10]);
// ziped
console.log(path.toString()); // 'M0,0A10,10,0,0,0,10,10'
// formated
console.log(path.toString('%s')); // 'M 0,0 A 10 10 0 0 0 10,10' only coordinate use comma to split
console.log(path.toString('%n')); // 'M 0,0\nA 10 10 0 0 0 10,10' commands are split with line-break
Converts JPath
object to a 2-dimension array, see example below.
var path = jpaths('M0,0h3v4L5,6');
console.log(path.toArray()); // [['M', 0, 0], ['h', 3], ['v', 4], ['L', 5, 6]]
console.log(path.valueOf()); // the same way to `toArray()`
Converts JPath
object to another, which commands use absolute coordinates.
var path = jpaths('M0,0h3v4l1,1');
console.log(path.toAbsolute().toString()); // 'M0,0H3V4L4,5'
Converts JPath
object to a normalized path. A normalized path string contains only 4 command types: M
, L
, C
, z
. All command coordinates are absolute.
var path = jpaths('...');
path = path.normalize(); // returns a new jpath object contains only 4 normalize command types.
Converts JPath
object to another which contains only M
, C
and z
commands.
var path = jpaths('M0,0H10');
path = path.toCurve(); // path.toString() is 'M0,0C0,0,10,0,10,0'
Calculate the path length (length-along-path)
var path = jpaths('...');
var length = path.length();
Calculate the point coordinate, tangent vector and tangent angle at the specific position along the path. Returns an object like this:
var path = jpaths('M0,0L10,10');
var vertex = path.at(2); // returns {
// point: [1.414, 1.414] // sqrt(2)
// tangent: [0.717, 0.717] // vector length will be 1
// rotate: 0.7854 // PI/4
// }
Notice: If the position is not in range of the path length, an error will throw
Cut the JPath
object into 2 JPath
objects from the position along the path
var path = jpaths('M0,0H100');
var cutted = path.cut(50);
console.log(cutted[0].toString()); // 'M0,0H50'
console.log(cutted[1].toString()); // 'M50,0H100'
Calculate the sub path from specified position and length. If length is not specified, return sub path from position to end.
var path = jpaths('M0,0H100');
var subpath = path.sub(20, 30); // 'M20,0H50'
Transform the path using the specified matrix. The matrix should be a 6-length array.
var path = jpaths('M0,0H100');
var transformed = path.transform([1, 0, 0, 1, 10, 10]); // transformed.toString() will be 'M10,10L110,10'
Calculate the tween from the current JPath
object to the destination JPath
object along t
. t
ranges in [0, 1].
var path = jpaths('M0,0H100');
var dest = jpaths('M0,0H50');
var tween = path.tween(dest, 0.5); // tween.toString() will be 'M0,0L75,0'
The JPath
object can be rendered to a canvas 2d context or a svg path element.
var path = jpath('M0,0L100,0,0,100');
// render to canvas
var ctx = canvas.getContext('2d');
path.render(ctx);
ctx.fillStyle = 'red';
ctx.fill();
// render to svg path element
var pathElement = document.querySelector('svg #triangle');
path.render(pathElement); // in fact, this equals to pathElement.setAttribute('d', path);
The jpath()
method returns the JPath
object, which is instanceof jpath.JPath
. You can construct a JPath
instance with new
operator.
var path = new jpath.JPath();
// same with `var path = jpath();`
The detail usage of the JPath
object is described above. Here's the list:
constructor jpath()
constructor jpath(pathString)
.append(commandName, params...)
.append(pathString)
.append(pathArray)
.toString()
.toArray()
.toAbsolute()
.toNormalized()
.toCurve()
.length()
.at(position)
.cut(position)
.sub(position, length)
.transform(matrix)
.tween(dest, t)
.render(CanvasRenderingContext2D ctx)
.render(SVGPathElement element)
Command | Grammar | Description |
---|---|---|
M/m | M|m (x, y)+ | Move to command |
L/l | L|l (x, y)+ | Line to command |
H/h | H|h (x)+ | Horizon line to command |
V/v | V|v (y)+ | Vertical line to command |
A/a | A|a (rx, ry, xr, laf, sf, x, y)+ | Arc to command |
C/c | C|c (x1, y1, x2, y2, x, y)+ | Cubic bezier to command |
Q/q | Q|q (x1, y1, x, y)+ | Quard bezier to command |
S/s | S|s (x2, y2, x, y)+ | Smooth(or short-hand) cubic bezier to command |
T/t | T|t (x, y)+ | Smooth(or short-hand) quard bezier to command |
Z/z | Z|z | Close path command |
R/r * | R|r (r, laf, sf, x, y)+ | Circle arc to command |
* Non-standard