toosoon-utils/lib/extras/curves/Path.d.ts

Utility functions & classes

import { Point } from '../../types';
import PathCurve from './PathCurve';
/**
 * Utility class for manipulating connected curves
 *
 * It works by providing methods for creating curves similar to the 2D Canvas API
 *
 *
 * @exports
 * @class CurvePath
 * @extends PathCurve
 */
export default class Path extends PathCurve {
    /**
     * Path current offset
     */
    currentPosition: Point;
    /**
     * Create a path from the given list of points
     *
     * @param {Point[]} points Array of points defining the path
     * @param {Point[]} type   Type of curve used for creating the path
     * @return {this}
     */
    setFromPoints(points: Point[], type?: 'lines' | 'polyline' | 'spline'): this;
    /**
     * Move {@link Path#currentPosition} to the coordinates specified by `x` and `y`
     *
     * @param {number} x X-axis coordinate of the point
     * @param {number} y Y-axis coordinate of the point
     * @return {this}
     */
    moveTo(x: number, y: number): this;
    /**
     * Draw a line from the current position to the position specified by `x` and `y`
     * Add an instance of {@link LineCurve} to the path
     *
     * @param {number} x X-axis coordinate of the point
     * @param {number} y Y-axis coordinate of the point
     * @return {this}
     */
    lineTo(x: number, y: number): this;
    /**
     * Draw a Polyline curve from the current position through the given points
     * Add an instance of {@link PolylineCurve} to the path
     *
     * @param {Point[]} points Array of points defining the curve
     * @returns {this}
     */
    polylineTo(points: Point[]): this;
    /**
     * Draw an Arc curve from the current position, tangential to the 2 segments created by both control points
     * Add an instance of {@link ArcCurve} to the path
     *
     * @param {number} x1 X-axis coordinate of the first control point
     * @param {number} y1 Y-axis coordinate of the first control point
     * @param {number} x2 X-axis coordinate of the second control point
     * @param {number} y2 Y-axis coordinate of the second control point
     * @param {number} radius Arc radius (Must be non-negative)
     * @returns {this}
     */
    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
    /**
     * Draw a Quadratic Bézier curve from the current position to the end point specified by `x` and `y`, using the control point specified by `cpx` and `cpy`
     * Add an instance of {@link QuadraticBezierCurve} to the path
     *
     * @param {number} cpx X-axis coordinate of the control point
     * @param {number} cpy Y-axis coordinate of the control point
     * @param {number} x2  X-axis coordinate of the end point
     * @param {number} y2  Y-axis coordinate of the end point
     * @return {this}
     */
    quadraticCurveTo(cpx: number, cpy: number, x2: number, y2: number): this;
    /**
     * Draw a Cubic Bézier curve from the current position to the end point specified by `x` and `y`, using the control point specified by (`cp1x`, `cp1y`) and (`cp2x`, `cp2y`)
     * Add an instance of {@link CubicBezierCurve} to the path
     *
     * @param {number} cp1x X-axis coordinate of the first control point
     * @param {number} cp1y Y-axis coordinate of the first control point
     * @param {number} cp2x X-axis coordinate of the second control point
     * @param {number} cp2y Y-axis coordinate of the second control point
     * @param {number} x2   X-axis coordinate of the end point
     * @param {number} y2   Y-axis coordinate of the end point
     * @return {this}
     */
    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x2: number, y2: number): this;
    /**
     * Draw a Catmul-Rom curve from the current position to the end point specified by `x` and `y`, using the control points specified by (`cp1x`, `cp1y`) and (`cp2x`, `cp2y`)
     * Add an instance of {@link CatmullRomCurve} to the path
     *
     * @param {number} cp1x X-axis coordinate of the first control point
     * @param {number} cp1y Y-axis coordinate of the first control point
     * @param {number} cp2x X-axis coordinate of the second control point
     * @param {number} cp2y Y-axis coordinate of the second control point
     * @param {number} x2   X-axis coordinate of the end point
     * @param {number} y2   Y-axis coordinate of the end point
     * @return {this}
     */
    catmulRomCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x2: number, y2: number): this;
    /**
     * Draw a Spline curve from the current position through the given points
     * Add an instance of {@link SplineCurve} to the path
     *
     * @param {Point[]} points Array of points defining the curve
     * @return {this}
     */
    splineTo(points: Point[]): this;
    /**
     * Draw an Ellispe curve which is centered at (`cx`, `cy`) position
     * Add an instance of {@link EllipseCurve} to the path
     *
     * @param {number} cx X-axis coordinate of the center of the circle
     * @param {number} cy Y-axis coordinate of the center of the circle
     * @param {number} rx X-radius of the ellipse
     * @param {number} ry Y-radius of the ellipse
     * @param {number} [rotation] 	Rotation angle of the ellipse (in radians), counterclockwise from the positive X-axis
     * @param {number} [startAngle] Start angle of the arc (in radians)
     * @param {number} [endAngle]   End angle of the arc (in radians)
     * @param {boolean} [counterclockwise] Flag indicating the direction of the arc
     * @return {this}
     */
    ellipse(cx: number, cy: number, rx: number, ry: number, rotation?: number, startAngle?: number, endAngle?: number, counterclockwise?: boolean): this;
    /**
     * Draw an Arc curve which is centered at (`cx`, `cy`) position
     * Add an instance of {@link ArcCurve} to the path
     *
     * @param {number} cx X-axis coordinate of the center of the circle
     * @param {number} cy Y-axis coordinate of the center of the circle
     * @param {number} radius Radius of the circle
     * @param {number} [startAngle] Start angle of the arc (in radians)
     * @param {number} [endAngle]   End angle of the arc (in radians)
     * @param {boolean} [counterclockwise] Flag indicating the direction of the arc
     * @return {this}
     */
    arc(cx: number, cy: number, radius: number, startAngle?: number, endAngle?: number, counterclockwise?: boolean): this;
    /**
     * Draw a rectangular path from the start position specified by `x` and `y` to the end position using `width` and `height`
     * Add an instance of {@link PolylineCurve} to the path
     *
     * @param {number} x 		  X-axis coordinate of the rectangle starting point
     * @param {number} y      Y-axis coordinate of the rectangle starting point
     * @param {number} width	Rectangle width (Positive values are to the right and negative to the left)
     * @param {number} height Rectangle height (Positive values are down, and negative are up)
     * @return {this}
     */
    rect(x: number, y: number, width: number, height: number): this;
    /**
     * Draw a rounded rectangular path from the start position specified by `x` and `y` to the end position using `width` and `height`
     *
     * @param {number} x 		  X-axis coordinate of the rectangle starting point
     * @param {number} y      Y-axis coordinate of the rectangle starting point
     * @param {number} width	Rectangle width (Positive values are to the right and negative to the left)
     * @param {number} height Rectangle height (Positive values are down, and negative are up)
     * @param {number|number[]} radius Radius of the circular arc to be used for the corners of the rectangle
     * @return {this}
     */
    roundRect(x: number, y: number, width: number, height: number, radius: number | number[]): this;
    /**
     * Add a line curve to close the curve path
     * Add an instance of {@link LineCurve} to the path
     */
    closePath(): this;
    private _setCurrentPosition;
}