JSPM

  • Created
  • Published
  • Downloads 3
  • Score
    100M100P100Q43972F
  • License MIT

Fast & Lightweight SVG Shape Manipulation library based on Points

Package Exports

  • points.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (points.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

points.js

Fast & Lightweight SVG Shape Manipulation library based on Points (@colinmeinke/points)

NPM
Greenkeeper badge Scrutinizer Scrutinizer Coverage NPM Version Build Status
NPM Downloads Github Releases jsdelivr unpkg npmcdn
Flattr this license

Note

  • Please use these methods before tweening initializing, because it changes the points for better natural look
  • This is extended version of Points

CDN

# unpkg
https://unpkg.com/points.js

# npmcdn
https://npmcdn.com/points.js

# jsDelivr
https://cdn.jsdelivr.net/npm/points.js

Installing

$ npm install points.js
# or
$ yarn install points.js

Docs

More information about other methods, see Points
Those functions does almost everything what you need, but sometimes hand-made changes required

autoNormalise

What it does?

It normalises your path data segments (curves, points, length, types) based on your from and to shapes.

Code
let [newFromShape, newToShape] = autoNormalise(fromShape, toShape); // Returns normalised path that equalised subpaths or path

autoReverse

What it does?

It determines the when firstShape should be reversed and reverses when necessary

Code
fromShape = autoReverse(fromShape, toShape);

autoIndex

What it does?

It finds closer and best index from fromShape closer to toShape and moves/changes/shifts fromShape points

Code
fromShape = autoIndex(fromShape, toShape);

autoCurve

What it does?

It compares two fromShape and toShape, when some point was mismatching, tries to normalise for correct work (line->curve)

Code
let [newFromShape, newToShape] = autoCurve(fromShape, toShape);

autoOptimize

What it does?

It converts Points object list to Array arrays list for future changing or controlling (for best performance) or for readable format when necessary

Code
let [newFromShape, newToShape] = autoOptimize(fromShape, toShape); // [['M', 10, 20], ['L', 50, 60]] - easier to tween, read and cleaner

splitAt

What it does?

Split the single-path to multi-path (sub-paths). (BETA, improvements would be nice)

Code
let subPaths = splitAt(fromShape, 0.3); // Split into 3-subpaths based on (1 / t:0.3)

autoFix

What it does?

Points.js#autoNormalise + when tweening/interpolation becomes ugly, it provides simple and fast solution for you

Code
let [newFromShape, newToShape] = autoFix(fromShape, toShape); // Returns normalised path that equalised subpaths with index matching