points.js
Fast & Lightweight SVG Shape Manipulation library based on Points (@colinmeinke/points)
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
Points
More information about other methods, seeThose 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 = ; // 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 = ;
autoIndex
What it does?
It finds closer and best index from fromShape
closer to toShape
and moves/changes/shifts fromShape
points
Code
fromShape = ;
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 = ;
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 = ; // [['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 = ; // 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 = ; // Returns normalised path that equalised subpaths with index matching