toosoon-utils
Version:
Utility functions & classes
248 lines (247 loc) • 12.4 kB
TypeScript
import type { Point2 } from '../../types';
import { Vector2 } from '../geometry';
import Path from './Path';
/**
* Utility class for manipulating connected curves providing methods similar to the 2D Canvas API
*
* @exports
* @class PathContext
* @extends Path
* @implements CanvasRenderingContext2D
*/
export default class PathContext extends Path<Vector2> implements CanvasRenderingContext2D {
protected _currentPosition: Vector2;
protected _currentTransform: DOMMatrix;
private _transformStack;
/**
* Create a path from a given list of points
*
* @param {Point2[]} points Array of points defining the path
* @return {this}
*/
setFromPoints(points: Point2[]): this;
/**
* Begin this path
*
* @return {this}
*/
beginPath(): this;
/**
* Draw a line from the ending position to the beginning position of this path
* Add an instance of {@link LineCurve} to this path
*
* @return {this}
*/
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 this 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 given points
* Add an instance of {@link PolylineCurve} to this path
*
* @param {Point2[]} points Array of points defining the curve
* @returns {this}
*/
polylineTo(points: Point2[]): 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 this 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 this 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 this 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 given points
* Add an instance of {@link SplineCurve} to this path
*
* @param {Point2[]} points Array of points defining the curve
* @return {this}
*/
splineTo(points: Point2[]): this;
/**
* Draw an Ellispe curve which is centered at (`cx`, `cy`) position
* Add an instance of {@link EllipseCurve} to this 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 this 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 an Arc curve from the current position, tangential to the 2 segments created by both control points
* Add an instance of {@link EllipseCurve} to this 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 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 this 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`
* Add an instance of {@link Path} to this 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)
* @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;
setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
setTransform(matrix: DOMMatrix): void;
getTransform(): DOMMatrix;
resetTransform(): void;
transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
translate(x: number, y: number): void;
rotate(angle: number): void;
scale(x: number, y: number): void;
save(): void;
restore(): void;
reset(): void;
protected _hasCurrentPosition(): boolean;
protected _setCurrentPosition(x: number, y: number): this;
protected _transformPoint(point: Point2): Point2;
protected _transformPoints(points: Point2[]): Point2[];
protected _transformVector(vector: Point2): Point2;
protected _transformEllipse(cx: number, cy: number, rx: number, ry: number, rotation: number): [number, number, number, number, number];
protected get _translateX(): number;
protected get _translateY(): number;
protected get _scaleX(): number;
protected get _scaleY(): number;
protected get _rotation(): number;
protected get _isTranslated(): boolean;
protected get _isScaled(): boolean;
protected get _isRotated(): boolean;
protected get _isUniform(): boolean;
protected get _isIdentity(): boolean;
canvas: CanvasRenderingContext2D['canvas'];
fillStyle: CanvasRenderingContext2D['fillStyle'];
strokeStyle: CanvasRenderingContext2D['strokeStyle'];
lineWidth: CanvasRenderingContext2D['lineWidth'];
lineCap: CanvasRenderingContext2D['lineCap'];
lineJoin: CanvasRenderingContext2D['lineJoin'];
lineDashOffset: CanvasRenderingContext2D['lineDashOffset'];
setLineDash: CanvasRenderingContext2D['setLineDash'];
getLineDash: CanvasRenderingContext2D['getLineDash'];
fillText: CanvasRenderingContext2D['fillText'];
strokeText: CanvasRenderingContext2D['strokeText'];
miterLimit: CanvasRenderingContext2D['miterLimit'];
fill: CanvasRenderingContext2D['fill'];
stroke: CanvasRenderingContext2D['stroke'];
clearRect: CanvasRenderingContext2D['clearRect'];
fillRect: CanvasRenderingContext2D['fillRect'];
strokeRect: CanvasRenderingContext2D['strokeRect'];
drawImage: CanvasRenderingContext2D['drawImage'];
clip: CanvasRenderingContext2D['clip'];
filter: CanvasRenderingContext2D['filter'];
globalAlpha: CanvasRenderingContext2D['globalAlpha'];
globalCompositeOperation: CanvasRenderingContext2D['globalCompositeOperation'];
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'];
shadowColor: CanvasRenderingContext2D['shadowColor'];
shadowBlur: CanvasRenderingContext2D['shadowBlur'];
shadowOffsetX: CanvasRenderingContext2D['shadowOffsetX'];
shadowOffsetY: CanvasRenderingContext2D['shadowOffsetY'];
drawFocusIfNeeded: CanvasRenderingContext2D['drawFocusIfNeeded'];
isPointInPath: CanvasRenderingContext2D['isPointInPath'];
isPointInStroke: CanvasRenderingContext2D['isPointInStroke'];
getContextAttributes(): CanvasRenderingContext2DSettings;
isContextLost(): boolean;
}