UNPKG

@joemaddalone/path

Version:

a simple svg path generation utility

536 lines (535 loc) 22.2 kB
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;