toosoon-utils
Version:
Utility functions & classes
228 lines (227 loc) • 11.7 kB
TypeScript
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;
}