mirror of
https://github.com/skishore/makemeahanzi.git
synced 2025-11-01 12:07:15 +08:00
43 lines
1.9 KiB
Markdown
43 lines
1.9 KiB
Markdown
[](https://travis-ci.org/rveciana/svg-path-properties)
|
|
[](https://coveralls.io/github/rveciana/svg-path-properties?branch=master)
|
|
|
|
# svg-path-properties
|
|
Pure Javascript alternative to getPointAtLength(t) and getTotalLength() functions. Works with Canvas and Node
|
|
|
|
JavaScript can access to path elements properties in a browser, such as its length and the point at a given length. Unfortunately, this can't be achieved using a Canvas element or when working with node. This library can be used to replace this need. It has no dependencies on other JavaScript libraries.
|
|
|
|
INSTALL
|
|
=======
|
|
|
|
To use with npm, just type
|
|
|
|
npm install svg-path-properties
|
|
|
|
USAGE
|
|
=====
|
|
|
|
var path = require("svg-path-properties");
|
|
var properties = path.svgPathProperties("M0,100 Q50,-50 100,100 T200,100");
|
|
var length = properties.getTotalLength();
|
|
var point = properties.getPointAtLength(200);
|
|
var tangent = properties.getTangentAtLength(200);
|
|
var allProperties = properties.getPropertiesAtLength(200);
|
|
var parts = properties.getParts(); --> Gets an array with the different sections of the path, each element containing the initial and final points, the length and the curve function
|
|
|
|
[Check this block](http://bl.ocks.org/rveciana/209fa7efeb01f05fa4a544a76ac8ed91) to see how it works with the browser.
|
|
|
|
CREDITS
|
|
=======
|
|
|
|
Some parts of the code are taken from other libraries or questions at StackOverflow:
|
|
|
|
For Bézier curves:
|
|
|
|
* http://bl.ocks.org/hnakamur/e7efd0602bfc15f66fc5, https://gist.github.com/tunght13488/6744e77c242cc7a94859
|
|
* http://stackoverflow.com/questions/11854907/calculate-the-length-of-a-segment-of-a-quadratic-bezier
|
|
* http://pomax.github.io/bezierinfo
|
|
|
|
For path parsing:
|
|
|
|
* https://github.com/jkroso/parse-svg-path
|