English | 한국어

---

VectorOptimizer

This is Javascript / Typescript implementation of Bobby Fraser's 'Curves' C# Project.

Curves is vector optimization utility library, and i have modified it for use browser and node.js environment.

After implementing all the features of the origin project first, I will add my own stuff that I need.

if you want to use this project, please thank to Bobby Fraser, not me.

---

What can you do with this?

if you draw in some shape using canvas or svg in browser, points will appear like below

If you connect these points in a straight line, lines will appear like below

this looks like an intended shape, but points are too many and there's a bit of jitter visible.

Using this project, you can reduce the number of points as below and show a natural curve shape.

---

Live Example

I made an example app like the origin project, so you can test how it works and how much it deforms. (Link)

---

Currently supported features compared to the original project

Preprocessing

• linearize
• Ramer-Douglas-Puecker

FitCurve

• FitCurve

Installation

$ npm install vector-optimizer

---

How to import

Plain HTML

<script src="https://unpkg.com/vector-optimizer@latest/dist/vector-optimizer.min.js"></script>

CommonJS

const VectorOptimizer = require('vector-optimizer');

ES6 Import

import * as VectorOptimizer from 'vector-optimizer';

---

API Document

It operates in two stages. The first is the Linearize(Simplify) step, and the second is the Fit(Fit curves to the data) step.

I recommend playing around with the sample app link for a bit to get a feel for exactly how the parameters and pre-processing methods work.

Also, please refer to the explanation of the original project.

Linearize

/**
 * @description
 * Creates a list of equally spaced points that lie on the path described by straight line segments between
 * adjacent points in the source list.
 * 
 * @param src - Source list of points.
 * @param minDistance - Distance between points on the new path.
 * @return - List of equally-spaced points on the path.
 */
export declare function linearize(
  src: Vector[],
  minDistance: number,
): Vector[];

Fit

export declare class CurveFit extends CurveFitBase {

  /**
   * @param points - Set of points to fit to.
   */
  constructor(
    points: ReadonlyArray<Vector>,
  );

/**
 * @description
 * Attempts to fit a set of Bezier curves to the given data. It returns a set of curves that form a
 * http://en.wikipedia.org/wiki/Composite_B%C3%A9zier_curve with C1 continuity (that is, each curve's start
 * point is coincident with the previous curve's end point, and the tangent vectors of the start and end
 * points are going in the same direction, so the curves will join up smoothly). Returns an empty array
 * if less than two points in input.
 * 
 * Input data MUST not contain repeated points (that is, the same point twice in succession). The best way to
 * ensure this is to call any one of the methods in <see cref="CurvePreprocess" />, since all three pre-processing
 * methods will remove duplicate points. If repeated points are encountered, unexpected behavior can occur.
 * 
 * @param maxError - Maximum distance from any data point to a point on the generated curve.
 */
  fit(maxError: number): CubicBezier[];
}