A specification for storing shape data in Javascript. Includes functions for adding, removing, reordering, converting and manipulating points.
If working with SVG you might find it well paired with svg-points.
If you are looking to convert a SVG DOM node directly to points,
then check out the frameShape function of
Wilderness DOM node.
4.0kb gzipped.
const shape = [
{ x: 50, y: 30, moveTo: true },
{ x: 50, y: 70, curve: { type: 'arc', rx: 20, ry: 20, sweepFlag: 1 } },
{ x: 50, y: 30, curve: { type: 'arc', rx: 20, ry: 20, sweepFlag: 1 } }
]add()– add additional points to a shapeboundingBox()– get a shape's bounding box and center coordinatescubify()– convert shape's curves to cubic bezierslength()– get a shape's lengthmoveIndex()– change the starting point of a shapeoffset()– offset a shapeposition()– find the coordinates and angle at a specific point of a shaperemove()– remove unrequired points of a shapereverse()– reverse the order of points of a shaperotate()– rotate a shapescale()– scale a shape
A shape is an array of 2 or more point objects.
A line should be drawn between each point in a shape.
Adding a moveTo property to a point indicates that
a line should not be drawn to that point from the
previous.
The first point in a shape must include the moveTo
property.
Each point is somewhere on an x, y plane. Therefore, at
the very least each point object requires x and y
properties. Values should be numeric.
{ x: 10, y: 25 }{
x: 80,
y: 35,
curve: {
type: 'arc',
rx: 2,
ry: 2,
xAxisRotation: 45,
sweepFlag: 1,
largeArcFlag: 1
}
}The curve properties xAxisRotation, sweepFlag and
largeArcFlag are all optional and if missing are assumed to
be 0.
{
x: 100,
y: 200,
curve: {
type: 'quadratic',
x1: 50,
y1: 200
}
}{
x: 5,
y: 10,
curve: {
type: 'cubic',
x1: 2,
y1: 0,
x2: 3,
y2: 10
}
}npm install points
import { add } from 'points'
const newShape = add(shape, 25)Takes an existing shape array as the first argument, and the total number of desired points as the second argument. Adds points without changing the shape and returns a new shape array.
import { boundingBox } from 'points'
const { top, right, bottom, left, center } = boundingBox(shape)Takes an existing shape array, or an array of shape arrays,
as the only argument and returns an object of bounding
coordinates including a center property containing the
x, y values.
import { cubify } from 'points'
const newShape = cubify(shape)Takes an existing shape array as the only argument, or an array of shape arrays, and converts any arc or quadratic bezier points to cubic bezier points.
Returns a new shape array or an array of shape arrays, depending on input.
import { length } from 'points'
const value = length(shape, 1)Takes an existing shape array as the first argument. The optional second argument takes a number above 0 but below 180. This second argument is the accuracy (in degrees) used to calculate when a curve is straight enough to be considered a straight line. Returns the length of the shape.
import { moveIndex } from 'points';
const newShape = moveIndex(shape, 3);Takes an existing shape array as the first argument, and the desired number of points to shift the index as the second argument (this can be a negative integer too). Returns a new shape array.
import { offset } from 'points'
const newShape = offset(shape, 10, 20)Takes an existing shape array, or an array of shape arrays, as the first argument, the horizontal offset as the second argument, and the vertical offset as the third argument.
Returns a new shape array or an array of shape arrays, depending on input.
import { position } from 'points'
const { angle, x, y } = position(shape, 0.5, 1)Takes an existing shape array as the first argument, and
an interval (a number from 0 to 1) as the second argument.
The optional third argument takes a number above 0 but below
180. This third argument is the accuracy (in degrees) used
to calculate when a curve is straight enough to be
considered a straight line. Returns an object that includes
the x and y coordinates at the interval of the shape,
and the angle of that point with the vertical.
import { remove } from 'points'
const newShape = remove(shape)Takes an existing shape array, or an array of shape arrays, as the only argument, and removes any points that do not affect the shape.
Returns a new shape array or an array of shape arrays, depending on input.
import { reverse } from 'points'
const newShape = reverse(shape)Takes an existing shape array, or an array of shape arrays, as the only argument, and reverses the order of the points.
Returns a new shape array or an array of shape arrays, depending on input.
import { rotate } from 'points'
const newShape = rotate(shape, 45)Takes an existing shape array, or an array of shape arrays, as the first argument. Takes the clockwise angle of rotation as the second argument.
Returns a new shape array or an array of shape arrays, depending on input.
import { scale } from 'points'
const newShape = scale(shape, 0.5, 'topLeft')Takes an existing shape array, or an array of shape arrays, as the first argument. Takes the scale factor as the second argument and an anchor point as the third argument.
The anchor point can take any of the following strings:
- center (default)
- topLeft
- topRight
- bottomRight
- bottomLeft
Returns a new shape array or an array of shape arrays, depending on input.
This is how you get to the good stuff if you're using
require.
const Points = require('points')
const add = Points.add
const boundingBox = Points.boundingBox
const cubify = Points.cubify
const moveIndex = Points.moveIndex
const offset = Points.offset
const position = Points.position
const remove = Points.remove
const reverse = Points.reverse
const scale = Points.scaleAnd if you just want to smash in a Javascript file you're also covered. Drop this in place ...
https://unpkg.com/points/dist/points.min.js
Then access it on the Points global variable.
const add = Points.add
const boundingBox = Points.boundingBox
const cubify = Points.cubify
const moveIndex = Points.moveIndex
const offset = Points.offset
const position = Points.position
const remove = Points.remove
const reverse = Points.reverse
const scale = Points.scaleIssues and pull requests gratefully received!
I'm also on twitter @colinmeinke.
Thanks 🌟
ISC.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent