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

• [x] linearize
• [ ] Ramer-Douglas-Puecker

FitCurve

• [x] 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[];
}