import type { Point } from '../../types'; import Path from './Path'; /** * Utility class for manipulating connected curves providing methods similar to the 2D Canvas API * * @exports * @class PathContext * @extends Path */ export default class PathContext extends Path implements CanvasRenderingContext2D { /** * 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; /** * Begin the path * Reset `currentPosition` */ beginPath(): void; /** * Draw a line from the ending position to the beginning position of the path * Add an instance of {@link LineCurve} to the path */ closePath(): 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 Catmull-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} */ catmullRomCurveTo(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; protected _setCurrentPosition(x: number, y: number): void; canvas: CanvasRenderingContext2D['canvas']; fillStyle: CanvasRenderingContext2D['fillStyle']; strokeStyle: CanvasRenderingContext2D['strokeStyle']; lineWidth: CanvasRenderingContext2D['lineWidth']; lineCap: CanvasRenderingContext2D['lineCap']; lineJoin: CanvasRenderingContext2D['lineJoin']; lineDashOffset: CanvasRenderingContext2D['lineDashOffset']; fillText: CanvasRenderingContext2D['fillText']; strokeText: CanvasRenderingContext2D['strokeText']; fill: CanvasRenderingContext2D['fill']; stroke: CanvasRenderingContext2D['stroke']; clearRect: CanvasRenderingContext2D['clearRect']; fillRect: CanvasRenderingContext2D['fillRect']; strokeRect: CanvasRenderingContext2D['strokeRect']; drawImage: CanvasRenderingContext2D['drawImage']; clip: CanvasRenderingContext2D['clip']; createLinearGradient: CanvasRenderingContext2D['createLinearGradient']; createRadialGradient: CanvasRenderingContext2D['createRadialGradient']; createConicGradient: CanvasRenderingContext2D['createConicGradient']; createPattern: CanvasRenderingContext2D['createPattern']; createImageData: CanvasRenderingContext2D['createImageData']; getImageData: CanvasRenderingContext2D['getImageData']; putImageData: CanvasRenderingContext2D['putImageData']; imageSmoothingEnabled: CanvasRenderingContext2D['imageSmoothingEnabled']; imageSmoothingQuality: CanvasRenderingContext2D['imageSmoothingQuality']; font: CanvasRenderingContext2D['font']; fontKerning: CanvasRenderingContext2D['fontKerning']; fontStretch: CanvasRenderingContext2D['fontStretch']; fontVariantCaps: CanvasRenderingContext2D['fontVariantCaps']; letterSpacing: CanvasRenderingContext2D['letterSpacing']; textAlign: CanvasRenderingContext2D['textAlign']; textBaseline: CanvasRenderingContext2D['textBaseline']; textRendering: CanvasRenderingContext2D['textRendering']; wordSpacing: CanvasRenderingContext2D['wordSpacing']; direction: CanvasRenderingContext2D['direction']; measureText: CanvasRenderingContext2D['measureText']; filter: CanvasRenderingContext2D['filter']; globalAlpha: CanvasRenderingContext2D['globalAlpha']; globalCompositeOperation: CanvasRenderingContext2D['globalCompositeOperation']; miterLimit: CanvasRenderingContext2D['miterLimit']; save: CanvasRenderingContext2D['save']; restore: CanvasRenderingContext2D['restore']; reset: CanvasRenderingContext2D['reset']; transform: CanvasRenderingContext2D['transform']; translate: CanvasRenderingContext2D['translate']; rotate: CanvasRenderingContext2D['rotate']; scale: CanvasRenderingContext2D['scale']; getTransform: CanvasRenderingContext2D['getTransform']; setTransform: CanvasRenderingContext2D['setTransform']; resetTransform: CanvasRenderingContext2D['resetTransform']; getLineDash: CanvasRenderingContext2D['getLineDash']; setLineDash: CanvasRenderingContext2D['setLineDash']; shadowBlur: CanvasRenderingContext2D['shadowBlur']; shadowColor: CanvasRenderingContext2D['shadowColor']; shadowOffsetX: CanvasRenderingContext2D['shadowOffsetX']; shadowOffsetY: CanvasRenderingContext2D['shadowOffsetY']; drawFocusIfNeeded: CanvasRenderingContext2D['drawFocusIfNeeded']; isPointInPath: CanvasRenderingContext2D['isPointInPath']; isPointInStroke: CanvasRenderingContext2D['isPointInStroke']; getContextAttributes: CanvasRenderingContext2D['getContextAttributes']; isContextLost: () => false; }