svg-polygon-points
Tiny library to manipulate SVG Polygon Points
Install
npm install --save svg-polygon-points
or
yarn add svg-polygon-points
Functions
- add – WIP
Bounding Box
– Calculate the bouding box dimensions of a polygonOffset
– Offset the polygonRotate
- Rotates the polygon clockwise- scale - WIP
Start In
– Draw a polygon like HTML canvasFrom Geo JSON
– Transform GeoJSON coords to SVG Polygon's pointsTo Geo JSON
– Returns the respective GeoJSON Array Coords
Usage
Bounding Box
boundingBox(points)
Get the bounding box
{String} points - The polygon points to manipulate.
Returns {Object} a { left, top, right, bottom, width, height. center } Object
const boundingBox = boundingBox;// or; const points = "28,224 256,224 256,352 128,352"/*=> { left: 28, top: 224, right: 256, bottom: 352, width: 228, height: 128, center: { x: 192, y: 288 } }*/
Offset
offset(points, angle, horizontalOffset, verticalOffset)
Offsets the polygon points
{String} points - The polygon points to manipulate.
{Number} horizontalOffset - The horizontal offset
{Number} verticalOffset - The horizontal offset
Returns {String} a polygons points string
const offset = offset;// or; const points = "0,0 128,0 128,128 0,128"//=> "100,50 228,50 228,178 100,178"
Rotate
rotate(points, angle, [center])
Rotates the polygon clockwise
{String} points - The polygon points to manipulate.
{Number} angle - The angle degrees to rotate
{Number} center - An { x, y } coord, If not especified, center of the bounding box will be used
Returns {String} a polygons points string
const rotate = rotate;// or; const points = "0,0 48,0 48,64 96,64 96,128 0,128"//=> "112,16 112,64 48,64 48,112 -16,112 -16,16"
Start In
startIn(coord)
Creates a Draw Object
{Object} coord - A { x, y } Object
Returns {Draw} a Draw Object
Draw methods
- drawTo({ direction, length })
- toPoints()
const startIn = startIn;// or; const points = //=> "50,50 200,50 200,200 350,200 350,350 50,350"
From Geo JSON
fromGeoJSON(points)
Transform GeoJSON coords to SVG Polygon's points
{Array} a GeoJSON Coordinates Array
returns {String} the polygon points.
const fromGeoJSON = fromGeoJSON;// or; const coords = "[ [[100,50], [228,50], [228,178], [100,178]] ]"//=> "100,50 228,50 228,178 100,178"
To Geo JSON
toGeoJSON(points)
Returns the respective GeoJSON Array Coords
{String} points - The polygon points to manipulate.
Returns {Array} a Coordinates Array
const toGeoJSON = toGeoJSON;// or; const points = "0,0 128,0 128,128 0,128"//=> [ [[100,50], [228,50], [228,178], [100,178]] ]
License
MIT © Diego Jara