Bezier.js

To add Bezier.js to your project dependencies, use npm. Use --save or --save-dev to ensure the dependency is persisted in your package.json.

npm install bezier-js

You can use the rolled-up version of the library located in the dist directory. Download the bezier.js file and include it directly in your JavaScript assets directory.

https://raw.githubusercontent.com/Pomax/bezierjs/master/dist/bezier.js

Bezier.js supports both ES Modules and legacy CommonJS syntax in Node.js. Use the Bezier constructor to create new curve instances.

// ES Module syntax
import { Bezier } from "bezier-js";

const b = new Bezier(...);

// Legacy CommonJS syntax
const Bezier = require("bezier-js");

const b = new Bezier(...);

You can manually include the library by copying the contents of the src directory or the rolled-up dist/bezier.js file to your project (e.g., /js or /vendor). Then, import the Bezier constructor directly from that file path.

import { Bezier } from "/js/vendor/bezier.js";

const b = new Bezier(...);

Bezier.js supports various Node.js versions for both require (CommonJS) and import (ESM) syntax. Note that ESM support in older v12 versions may require experimental flags.

| Node Version | Require Supported | Import Supported |
| ------------ | ----------------- | ----------------- |
| v12.0.0      | Yes               | Yes <sup>Experimental Flag</sup> |
| v12.14.1     | Yes               | No <sup>Experimental Flag</sup> |
| v12.17.0     | Yes               | Yes <sup>Experimental Warning</sup> |
| v12.22.1     | Yes               | Yes |
| v14.0.0      | Yes               | Yes |
| v14.16.1     | Yes               | Yes |

Methods available on the PolyBezier class:

• constructor(curves): Initializes the poly-bezier with an array of curves. If curves is provided, it inherits the _3d property from the first curve.
• addCurve(curve): Appends a new curve to the sequence. Updates the _3d property if the new curve is 3D.
• length(): Returns the sum of the lengths of all individual curves in the sequence.
• curve(idx): Returns the curve at the specified index.
• bbox(): Returns the bounding box that contains all curves in the sequence.
• offset(d): Returns a new PolyBezier instance representing the offset of the sequence by distance d.
• toString(): Returns a string representation of the points in all curves, formatted as [points1, points2, ...].
• valueOf(): Returns the string representation of the poly-bezier.

The Bezier class is the primary interface for creating and manipulating Bezier curves. You can instantiate a curve by passing an array of coordinate objects or a flat array of numbers.

Coordinate Formats:

• Object Array: [{x, y}, {x, y}, ...]
• Flat Array: [x1, y1, x2, y2, ...]
• 3D Support: If the input objects contain a z property or if the flat array has a length that implies 3D (multiples of 3), the curve will be treated as 3D.

Order: The curve order is determined by the number of points: order = points.length - 1.

Use the static method Bezier.cubicFromPoints(S, B, E, t, d1) to create a cubic curve.

• S: Start point
• B: Control point 1
• E: Control point 2
• t: Parameter (default 0.5)
• d1: Distance for the first control point (if undefined, it is calculated based on the distance between B and the calculated point C).

The .outline(d1, d2, d3, d4) method creates a PolyBezier representing the outline (offset) of the curve.

• d1: Offset distance for the 'front' side.
• d2: Offset distance for the 'back' side.
• d3, d4: Optional graduated offset distances for the end of the curve.