Additional options are to provide a closed spline as well as segment resolution (between each point) and of course a tension value.
The archive comes with three separate versions for the sake of convenience:
Canvas 2D context extension. Call curve() on the context (ctx.curve(...))
If you prefer not to use an extension then this version provide a pure function that takes the context as an argument instead.
Just the internal function that calculates the points. Does not draw anything.
As well as their minified equivalent. There are no dependencies between these implementations.
bower install cardinal-spline-js
- Git using HTTPS:
git clone https://gitlab.com/epistemex/cardinal-spline-js.git
- Git using SSH:
git clone email@example.com:epistemex/cardinal-spline-js.git
npm install -g cardinal-spline-js(curve_calc.js / curve_func.js)
Make sure the script is loaded before a 2D context is obtained from the canvas element.
curve() as any other method/function on the context -
ctx.moveTo(points, points); // optionally move to first point ctx.curve(points); // add cardinal spline to path ctx.stroke(); // stroke path
will draw the points in the array which are arranged in the following manner:
var points = [x1, y1, x2, y2, ... xn, yn];
An optional tension value can be given (default: 0.5):
ctx.curve(points, 0.5); // sets tension [0.0, 1.0] +/-
a segment resolution value (default: 25):
ctx.curve(points, 0.5, 25); // points in each segment
The curve can be drawn closed. All arguments must be given in this case (default: false (open)):
ctx.curve(points, 0.5, 25, true); // make a closed loop
The function returns a new (typed) array with the spline points which can be used for tracking, calculate length and so forth. The values are in floating points:
var splinePoints = ctx.curve(points);
If you use the function file instead the arguments will be the same as above except that the context is passed in as the first argument and then the function is instead called as:
ctx.moveTo(points, points); // optionally move to first point curve(ctx, points); // add cardinal spline to path ctx.stroke(); // stroke path
Also this variant returns a spline point array.
If you just want to calculate the spline points without drawing anything,
you can use the
curve_calc.js file and call (please observe that the
name has been changed to better reflect its purpose):
var splinePoints = getCurvePoints(points, ...);
Context is not required with this function.
Require the package after installing it using npm, then:
var getCurvePoints = require("cardinal-spline-js").getCurvePoints; var outPoints = getCurvePoints(inPoints);
A modern HTML5 compliant browser with support for Typed Arrays and
curve_calc.js the canvas element and
a 2D context is required as well.
Released under MIT license. You can use this class in both commercial and non-commercial projects provided that full header (minified and developer versions) is included.
© 2013-2017 Epistemex