@joemaddalone/path
Version:
a simple svg path generation utility
536 lines (535 loc) • 22.2 kB
TypeScript
declare class Path {
/**
* array of path data.
*/
pathData: string[];
/**
* path attributes.
*/
attributes: object[];
/**
* @param angle - angle in degrees
* @returns angle in radians
*/
static angleInRadians(angle: number): number;
/**
* @param cx - center x coordinate
* @param cy - center y coordinate
* @param radius - radius
* @param angle - degree
* @returns cartesian coordinates
*/
static polarToCartesian(cx: number, cy: number, radius: number, angle: number): any;
/**
* @param cx - center x coordinate
* @param cy - center y coordinate
* @param radius - radius
* @param angle - degree
* @returns cartesian coordinates
*/
static clockwisePoint(cx: number, cy: number, radius: number, angle: number): any;
/**
* @param radius - radius
* @param cx - center x coordinate
* @param cy - center y coordinate
* @param numOfPoints - number of points
* @param offsetAngle - offset angle
* @param [vertexSkip = 1] - vertex skip
* @returns array of points
*/
static radialPoints(radius: number, cx: number, cy: number, numOfPoints: number, offsetAngle: number, vertexSkip?: number): object[];
/**
* @param size - size of each element
* @param shape - shape
* @param sx - start x coordinate
* @param sy - start y coordinate
* @returns array of points
*/
static positionByArray(size: number, shape: any[], sx: number, sy: number): object[];
/**
* @param name - name of the macro
* @param fn - function to be executed
* @returns macro function
*/
static macro(name: string, fn: (...params: any[]) => any): (...params: any[]) => any;
/**
* @param key - key of the attribute
* @param val - value of the attribute
*/
static attr(key: string, val: any): void;
/**
* fill attribute shortcut
* @param val - value for fill attribute
* @returns this
*/
fill(val: string | number): Path;
/**
* stroke attribute shortcut
* @param val - value for stroke attribute
* @returns this
*/
stroke(val: string): Path;
/**
* stroke-width attribute shortcut
* @param val - value for stroke-width attribute
* @returns this
*/
strokeWidth(val: string | number): Path;
/**
* style attribute shortcut
* @param val - value for style attribute
* @returns this
*/
style(val: string): Path;
/**
* Move svg cursor to x, y relative to current position.
* @param x - x coordinate
* @param y - y coordinate
*/
m(x: number, y: number): Path;
/**
* Move svg cursor to x, y absolute position.
* @param x - x coordinate
* @param y - y coordinate
*/
M(x: number, y: number): Path;
/**
* Move svg cursor to x, y. If relative is true, x, y is relative to current position.
* @param x - x coordinate
* @param y - y coordinate
* @param [relative = false] - relative move
*/
moveTo(x: number, y: number, relative?: boolean): Path;
/**
* Draw straight line to x, y relative to current position.
* @param x - x coordinate
* @param y - y coordinate
*/
l(x: number, y: number): Path;
/**
* Draw straight line to x, y absolute position.
* @param x - x coordinate
* @param y - y coordinate
*/
L(x: number, y: number): Path;
/**
* Draw straight line to x, y. If relative is true, x, y is relative to current position.
* @param x - x coordinate
* @param y - y coordinate
*/
lineTo(x: number, y: number, relative?: boolean): Path;
/**
* Draw a horizontal line to x absolute position.
* @param x - x coordinate
*/
H(x: number): Path;
/**
* Draw a horizontal line to x relative to current position.
* @param x - x coordinate
*/
h(x: number): Path;
/**
* Draw a horizontal line to x. If relative is true, x is relative to current position.
* @param x - x coordinate
* @param [relative = false] - relative move
*/
horizontalTo(x: number, relative?: boolean): Path;
/**
* Draw a vertical line to y absolute position.
* @param y - y coordinate
*/
V(y: number): Path;
/**
* Draw a vertical line to y relative to current position.
* @param y - y coordinate
*/
v(y: number): Path;
/**
* Draw a vertical line to y. If relative is true, y is relative to current position.
* @param y - y coordinate
* @param [relative = false] - relative move
*/
verticalTo(y: number, relative?: boolean): Path;
/**
* Draw quadratic curve to absolute ex, ey using absolute cx,cy as the control point.
* @param cx - control point x coordinate
* @param cy - control point y coordinate
* @param ex - end x coordinate
* @param ey - end y coordinate
*/
Q(cx: number, cy: number, ex: number, ey: number): Path;
/**
* Draw quadratic curve to relative ex, ey using relative cx,cy as the control point.
* @param cx - control point x coordinate
* @param cy - control point y coordinate
* @param ex - end x coordinate
* @param ey - end y coordinate
*/
q(cx: number, cy: number, ex: number, ey: number): Path;
/**
* Draw quadratic curve to ex, ey using cx,cy as the control point. If relative is true, points are relative to current position.
* @param cx - control point x coordinate
* @param cy - control point y coordinate
* @param ex - end x coordinate
* @param ey - end y coordinate
* @param [relative = false] - relative move
*/
qCurve(cx: number, cy: number, ex: number, ey: number, relative?: boolean): Path;
/**
* Smooth quadratic curve to x, y absolute position.
* @param x - x coordinate
* @param y - y coordinate
*/
T(x: number, y: number): Path;
/**
* Smooth quadratic curve to x, y relative to current position.
* @param x - x coordinate
* @param y - y coordinate
*/
t(x: number, y: number): Path;
/**
* Smooth quadratic curve to x, y. If relative is true, x, y is relative to current position.
* @param x - x coordinate
* @param y - y coordinate
* @param [relative = false] - relative move
*/
tCurveTo(x: number, y: number, relative?: boolean): Path;
/**
* Draw cubic curve to absolute ex, ey using absolute cx1, cy1 & cx2, cy2 as the control points.
* @param cx1 - first control point x coordinate
* @param cy1 - first control point y coordinate
* @param cx2 - second control point x coordinate
* @param cy2 - second control point y coordinate
* @param ex - end x coordinate
* @param ey - end y coordinate
*/
C(cx1: number, cy1: number, cx2: number, cy2: number, ex: number, ey: number): Path;
/**
* Draw cubic curve to relative ex, ey using relative cx1, cy1 & cx2, cy2 as the control points.
* @param cx1 - first control point x coordinate
* @param cy1 - first control point y coordinate
* @param cx2 - second control point x coordinate
* @param cy2 - second control point y coordinate
* @param ex - end x coordinate
* @param ey - end y coordinate
*/
c(cx1: number, cy1: number, cx2: number, cy2: number, ex: number, ey: number): Path;
/**
* Draw cubic curve to ex, ey using cx1, cy1 & cx2, cy2 as the control points. If relative is true, points are relative to current position.
* @param cx1 - first control point x coordinate
* @param cy1 - first control point y coordinate
* @param cx2 - second control point x coordinate
* @param cy2 - second control point y coordinate
* @param ex - end x coordinate
* @param ey - end y coordinate
* @param [relative = false] - relative move
*/
cCurve(cx1: number, cy1: number, cx2: number, cy2: number, ex: number, ey: number, relative?: boolean): Path;
/**
* Smooth cubic curve to absolute x, y using absolute cx, cy as the control point.
* @param cx - control point x coordinate
* @param cy - control point y coordinate
* @param ex - end x coordinate
* @param ey - end y coordinate
*/
S(cx: number, cy: number, ex: number, ey: number): Path;
/**
* Smooth cubic curve to relative x, y using relative cx, cy as the control point.
* @param cx - control point x coordinate
* @param cy - control point y coordinate
* @param ex - end x coordinate
* @param ey - end y coordinate
*/
s(cx: number, cy: number, ex: number, ey: number): Path;
/**
* Smooth cubic curve to x, y using cx, cy as the control point. If relative is true, points are relative to current position.
* @param cx - control point x coordinate
* @param cy - control point y coordinate
* @param ex - end x coordinate
* @param ey - end y coordinate
* @param [relative = false] - relative move
*/
sCurveTo(cx: number, cy: number, ex: number, ey: number, relative?: boolean): Path;
/**
* Create arc with absolute positioning
* @param rx - x radius
* @param ry - y radius
* @param rotation - rotation
* @param arc - arc flag
* @param sweep - sweep flag
* @param ex - end x coordinate
* @param ey - end y coordinate
*/
A(rx: number, ry: number, rotation: number, arc: boolean, sweep: boolean, ex: number, ey: number): Path;
/**
* Create arc with relative positioning
* @param rx - x radius
* @param ry - y radius
* @param rotation - rotation
* @param arc - arc flag
* @param sweep - sweep flag
* @param ex - end x coordinate
* @param ey - end y coordinate
*/
a(rx: number, ry: number, rotation: number, arc: boolean, sweep: boolean, ex: number, ey: number): Path;
/**
* Create arc. If relative is true, points are relative to current position.
* @param rx - x radius
* @param ry - y radius
* @param rotation - rotation
* @param arc - arc flag
* @param sweep - sweep flag
* @param ex - end x coordinate
* @param ey - end y coordinate
* @param [relative = false] - relative move
*/
arc(rx: number, ry: number, rotation: number, arc: boolean, sweep: boolean, ex: number, ey: number, relative?: boolean): Path;
/**
* Move down to relative point px away
* @param px - number of pixels to move down
*/
down(px: number): Path;
/**
* Move up to relative point px away
* @param px - number of pixels to move up
*/
up(px: number): Path;
/**
* Move right to relative point px away
* @param px - number of pixels to move right
*/
right(px: number): Path;
/**
* Move left to relative point px away
* @param px - number of pixels to move left
*/
left(px: number): Path;
/**
* Close path.
*/
close(): Path;
/**
* Return pathData array.
*/
toArray(): any[];
/**
* Return joined pathData array.
*/
toString(): string;
/**
* Return pathData as commands.
*/
toCommands(): any[][];
/**
* Return pathData as annotated commands.
*/
toAnnotatedCommands(): object[];
/**
* Create dom-ready <path> element
*/
toElement(attributes?: any): Element;
/**
* @param size - circumference
* @param cx - center x coordinate
* @param cy - center y coordinate
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
circle(size: number, cx: number, cy: number, centerEnd?: boolean): Path;
/**
* @param width - The width of the cross.
* @param height - The height of the cross.
* @param cx - The x-coordinate of the center of the cross.
* @param cy - The y-coordinate of the center of the cross.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
cross(width: number, height: number, cx: number, cy: number, centerEnd?: boolean): Path;
/**
* @param width - The width of the ellipse.
* @param height - The height of the ellipse.
* @param cx - The x coordinate of the center of the ellipse.
* @param cy - The y coordinate of the center of the ellipse.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
ellipse(width: number, height: number, cx: number, cy: number, centerEnd?: boolean): Path;
/**
* @param size - The size of the regular polygon.
* @param cx - The x-coordinate of the center of the regular polygon.
* @param cy - The y-coordinate of the center of the regular polygon.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
isocube(size: number, cx: number, cy: number, centerEnd?: boolean): Path;
kite: any;
/**
* @param width - The width of the lens.
* @param height - The height of the lens.
* @param cx - The x-coordinate of the center of the lens.
* @param cy - The y-coordinate of the center of the lens.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
lens(width: number, height: number, cx: number, cy: number, centerEnd?: boolean): Path;
/**
* @param size - The size of each element.
* @param shape - The shape of the array.
* @param sx - The x-coordinate of the start point.
* @param sy - The y-coordinate of the start point.
* @param [lined = false] - Whether to draw a line between each element.
* @returns the path object for chaining
*/
omino(size: number, shape: any[], sx: number, sy: number, lined?: boolean): Path;
/**
* @param points - Array of points
* @returns the path object for chaining
*/
polygon(points: number[]): Path;
/**
* @param size - The size of the polygram.
* @param points - The points of the polygram.
* @param cx - The x-coordinate of the center of the polygram.
* @param cy - The y-coordinate of the center of the polygram.
* @param [vertexSkip = 2] - The number of vertices to skip.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
polygram(size: number, points: number[], cx: number, cy: number, vertexSkip?: number, centerEnd?: boolean): Path;
/**
* @param points - Array of points
* @param [relative = false] - If true, the points are relative to the current position
* @returns the path object for chaining
*/
polyline(points: number[], relative?: boolean): Path;
/**
* @param outerSize - Outer size of the radial lines.
* @param innerSize - Inner size of the radial lines.
* @param points - Number of points to draw.
* @param cx - Center x coordinates.
* @param cy - Center y coordinates.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
radialLines(outerSize: number, innerSize: number, points: number, cx: number[], cy: number, centerEnd?: boolean): Path;
/**
* @param width - The width of the rectangle.
* @param height - The height of the rectangle.
* @param cx - The x-coordinate of the center of the rectangle.
* @param cy - The y-coordinate of the center of the rectangle.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
rect(width: number, height: number, cx: number, cy: number, centerEnd?: boolean): Path;
/**
* @param size - The size of the regular polygon.
* @param sides - The number of sides of the regular polygon.
* @param cx - The x-coordinate of the center of the regular polygon.
* @param cy - The y-coordinate of the center of the regular polygon.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
regPolygon(size: number, sides: number, cx: number, cy: number, centerEnd?: boolean): Path;
/**
* @param width - The width of the rect.
* @param height - The height of the rect.
* @param radius - The radius of the rounded corners.
* @param cx - The x-coordinate of the center of the square.
* @param cy - The y-coordinate of the center of the square.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
roundedRect(width: number, height: number, radius: number, cx: number, cy: number, centerEnd?: boolean): Path;
/**
* @param size - The size of the square.
* @param radius - The radius of the rounded corners.
* @param cx - The x-coordinate of the center of the square.
* @param cy - The y-coordinate of the center of the square.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
roundedSquare(size: number, radius: number, cx: number, cy: number, centerEnd?: boolean): Path;
/**
* @param cx - The x coordinate of the center of the sector.
* @param cy - The y coordinate of the center of the sector.
* @param size - The size of the sector.
* @param startAngle - The start angle of the sector.
* @param endAngle - The end angle of the sector.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
sector(cx: number, cy: number, size: number, startAngle: number, endAngle: number, centerEnd?: boolean): Path;
/**
* @param cx - The x-coordinate of the center of the circle.
* @param cy - The y-coordinate of the center of the circle.
* @param size - The radius of the circle.
* @param startAngle - The starting angle of the segment.
* @param endAngle - The ending angle of the segment.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
segment(cx: number, cy: number, size: number, startAngle: number, endAngle: number, centerEnd?: boolean): Path;
/**
* @param size - The size of the square.
* @param cx - The x-coordinate of the center of the square.
* @param cy - The y-coordinate of the center of the square.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
square(size: number, cx: number, cy: number, centerEnd?: boolean): Path;
/**
* @param outerSize - Outer radius of the star.
* @param innerSize - Inner radius of the star.
* @param points - Array of angles of the star points.
* @param cx - Center x coordinate.
* @param cy - Center y coordinate.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
star(outerSize: number, innerSize: number, points: number[], cx: number, cy: number, centerEnd?: boolean): Path;
/**
* @param width - The width of the symbol.
* @param height - The height of the symbol.
* @param cx - The x-coordinate of the center of the symbol.
* @param cy - The y-coordinate of the center of the symbol.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
symH(width: number, height: number, cx: number, cy: number, centerEnd?: boolean): Path;
/**
* @param width - The width of the symbol.
* @param height - The height of the symbol.
* @param cx - The x-coordinate of the center of the symbol.
* @param cy - The y-coordinate of the center of the symbol.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
symI(width: number, height: number, cx: number, cy: number, centerEnd?: boolean): Path;
/**
* @param width - The width of the symbol.
* @param height - The height of the symbol.
* @param cx - The x-coordinate of the center of the symbol.
* @param cy - The y-coordinate of the center of the symbol.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
symV(width: number, height: number, cx: number, cy: number, centerEnd?: boolean): Path;
/**
* @param width - The width of the symbol.
* @param height - The height of the symbol.
* @param cx - The x-coordinate of the center of the symbol.
* @param cy - The y-coordinate of the center of the symbol.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
symX(width: number, height: number, cx: number, cy: number, centerEnd?: boolean): Path;
/**
* @param size - The size of the triangle.
* @param cx - The x-coordinate of the center of the triangle.
* @param cy - The y-coordinate of the center of the triangle.
* @param [centerEnd = true] - if false, the final position of the cursor is at the end of the path
* @returns the path object for chaining
*/
triangle(size: number, cx: number, cy: number, centerEnd?: boolean): Path;
}
export default Path;