import { Rect } from 'geome'; import { mat2d, vec2 } from 'linearly'; import type p5 from 'p5'; import { OffsetOptions as PaperOffsetOptions } from 'paperjs-offset'; import { Curve } from './Curve.js'; import { CurveGroup } from './CurveGroup.js'; import { Iter } from './Iter.js'; import { PathLocation, TimePathLocation } from './Location.js'; import { Segment } from './Segment.js'; /** * Arguments for cubic Bézier curve (`C`) command. * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#curve_commands * @category Types */ export type CommandArgsC = readonly [control1: vec2, control2: vec2]; /** * Arguments for arc (`A`) command * @category Types * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#arcs */ export type CommandArgsA = readonly [ /** * The radii of the ellipse used to draw the arc. */ radii: vec2, /** * The rotation angle of the ellipse's x-axis relative to the x-axis of the current coordinate system, expressed in degrees. */ xAxisRotation: number, /** * If true, then draw the arc spanning greather than 180 degrees. Otherwise, draw the arc spanning less than 180 degrees. */ largeArcFlag: boolean, /** * If true, then draw the arc in a "positive-angle" direction in the current coordinate system. Otherwise, draw it in a "negative-angle" direction. */ sweepFlag: boolean ]; /** * A vertex of a path. It consists of a end point and an interpolation command from the previous vertex, which is either a line (`L`) command, a cubic Bézier curve (`C`) command, or an arc (`A`) command. * @category Types */ export type Vertex = VertexL | VertexC | VertexA; /** * A vertex representing a line (`L`) command. * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Line_commands * @category Types */ export type VertexL = { readonly point: vec2; readonly command: 'L'; readonly args?: undefined; }; /** * A vertex representing a cubic Bézier curve (`C`) command. * @category Types **/ export type VertexC = { readonly point: vec2; readonly command: 'C'; readonly args: CommandArgsC; }; /** * A vertex representing an arc (`A`) command. * @category Types * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#arcs **/ export type VertexA = { readonly point: vec2; readonly command: 'A'; readonly args: CommandArgsA; }; /** * A path that consists of multiple curves. * @category Types */ export type Path = { readonly curves: Curve[]; }; /** * A path that only consists of line (`L`) commands, which is a simple polygon or polyline. * @category Types * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Line_commands **/ export type PathL = Path; /** * A path that only consists of cubic Bézier curve (`C`) commands. * @category Types * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#curve_commands **/ export type PathC = Path; /** * A path that only consists of arc (`A`) commands. * @category Types * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#curve_commands **/ export type PathA = Path; /** * A path that does not contain any {@link VertexA}. It can be obtained by {@link Path.unarc}, while approximating arcs to cubic Bézier curves. In some non-affine transformations such as {@link Path.distort} and {@link Path.offset}, all arcs are internally converted to this type of path. * @category Types */ type UnarcPath = Path; type SVGCommand = 'M' | 'L' | 'H' | 'V' | 'Q' | 'T' | 'C' | 'S' | 'A' | 'Z' | 'm' | 'l' | 'h' | 'v' | 'q' | 't' | 'c' | 's' | 'a' | 'z' | vec2 | boolean | number; /** * Functions for manipulating paths represented as {@link Path}. * * For creating new paths, see [Primitives](#primitives). Getting intrinsic properties of paths, see [Properties](#properties). * Manipulating existing paths, such as transforming, styling , deforming, etc., see [Modifiers](#modifiers). * * @category Modules */ export declare namespace Path { /** * Empty path. * @category Primitives */ const empty: Path; /** * Creates a rectangle path from the given two points. * @param start The first point defining the rectangle * @param end The second point defining the rectangle * @returns The newly created path * @category Primitives * @example * ```js:pave * const p = Path.rectangle([10, 30], [90, 70]) * stroke(p) * ``` */ function rectangle(start: vec2, end: vec2): Path; /** * Alias for {@link rectangle} * @category Primitives */ const rect: typeof rectangle; /** * Creates a rectangle path from the given center and size. * @param center The center of the rectangle * @param size The size of the rectangle * @returns The newly created path * @category Primitives */ function rectFromCenter(center: vec2, size: vec2): Path; /** * Creates a rounded rectangle. The arguments are almost the same as the CanvasRenderingContext2D's `roundRect` method. * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect * @category Primitives */ function roundRect(start: vec2, end: vec2, radii: number | [allCorner: number] | [topLeftAndBottomRight: number, topRightAndBottomLeft: number] | [topLeft: number, topRightAndBottomLeft: number, bottomRight: number] | [ topLeft: number, topRight: number, bottomRight: number, bottomLeft: number ]): Path; /** * Creates a circle path from the given center and radius. * @param center The center of the circle * @param radius The radius of the circle * @returns The newly created path * @category Primitives * @example * ```js:pave * const c = Path.circle([50, 50], 40) * stroke(c) * ``` */ function circle(center: vec2, radius: number): Path; /** * Creates a semicircle path from the given start and end points. * @category Primitives */ function semicircle(start: vec2, end: vec2, closed?: boolean): Path; /** * Creates an infinite line path from the given two points. Unlike {@link line}, the line will be drawn nearly infinitely in both directions. * @param point0 The first point * @param point1 The second point * @param distance The length of the infinite line for each direction * @returns The infinite line path * @category Primitives */ function infiniteLine(point0: vec2, point1: vec2, distance?: number): Path; /** * Creates a [half-line](https://en.wikipedia.org/wiki/Line_(geometry)#Ray), infinite line in one direction from a starting point and a point that the line passes through. It is not actually an inifinite, but one with a very large length. * @param point The starting point * @param through The point that the line passes through * @param distance The length of the half-line * @returns The half-line path * @category Primitives */ function halfLine(point: vec2, through: vec2, distance?: number): Path; /** * @category Options */ interface CircleFromPointsOptions { /** * If the given points are less than three and the circumcenter cannot be well-defined, the circle will be drawn in the direction of the sweep flag. (in Canvas API, it means clockwise). * @default true */ preferredSweep?: boolean; } /** * Creates a circle path which passes through the given points. * @param p1 The first point * @param p2 The second point * @param p3 The third point * @returns The circle path, whose first point matches to `p1`. After duplicating points are removed, if there are only one point, creates a circle with zero radius. For two points, creates a circle from the two points as the diameter. Otherwise, creates a circle that passes through the three points. * @category Primitives * @example * ```js:pave * const p1 = [30, 30] * const p2 = [70, 30] * const p3 = [50, 60] * * dot(p1) * dot(p2) * dot(p3) * * stroke(Path.circleFromPoints(p1, p2)) * stroke(Path.circleFromPoints(p1, p2, p3), 'skyblue') * ``` */ function circleFromPoints(p1: vec2, p2?: vec2 | null, p3?: vec2 | null, { preferredSweep }?: CircleFromPointsOptions): Path; /** * Creates an ellipse path from the given center and radius. * @param center The center of the ellipse * @param radius The radius of the ellipse * @returns The newly created path * @category Primitives * @example * ```js:pave * const e = Path.ellipse([50, 50], [20, 40]) * stroke(e) * ``` */ function ellipse(center: vec2, radius: vec2): Path; /** * An options for {@link arc} * @category Options */ type ArcOptions = { /** * The maximum angle step in degrees * @default `360 - 1e-4` */ step?: number; /** * The alignment of the vertices * @default 'uniform' */ align?: Iter.ResampleOptions['align']; /** * The total count of the segments in the arc. If this is specified, the `step` will be ignored and the arc will be deviced into the specified number of segments uniformly. */ count?: number; }; /** * Creates an arc path. * @param center The center of the arc * @param radius The radius of the arc * @param startAngle The start angle in radians * @param endAngle The end angle in radians * @returns The newly created path * @category Primitives * @example * ```js:pave * const a = Path.arc([50, 50], 40, 0, 90) * stroke(a) * ``` */ function arc(center: vec2, radius: number, startAngle: number, endAngle: number, options?: ArcOptions): Path; /** * Creates an arc path from the given three points. If the points are collinear, it will create a straight line path. * @param start The start point * @param through The point that the arc passes through * @param end The end point * @returns The newly created path * @category Primitives */ function arcByPoints(start: vec2, through: vec2, end: vec2): Path; /** * Creates an arc path from start point, start tangent, and end point. * @param start The start point * @param startTangent The tangent at the start point * @param end The end point * @returns A newly created open arc path * @category Primitives */ function arcByPointsTangent(start: vec2, startTangent: vec2, end: vec2): Path; /** * Creates an arc path from two points and an angle. * @param start The start point * @param end The end point * @param angle The angle of arc in degrees. If the angle is positive, the arc will be drawn in the sweep direction (clockwise in Y-down coordinate system). * @returns The newly created path * @category Primitives */ function arcByPointsAngle(start: vec2, end: vec2, angle: number): Path; /** * Creates a fan path. * @param center The center of the fan * @param innerRadius The inner radius of the fan * @param outerRadius The outer radius of the fan * @param startAngle The start angle in radians * @param endAngle The end angle in radians * @returns The newly created path * @category Primitives * @example * ```js:pave * const f = Path.fan([50, 50], 20, 40, 0, 90) * stroke(f) * ``` */ function fan(center: vec2, innerRadius: number, outerRadius: number, startAngle: number, endAngle: number): Path; /** * Creates a linear path from two points describing a line. * @param start The line's starting point * @param end The line's ending point * @returns The newly created path * @category Primitives * @example * ```js:pave * const p = Path.line([10, 10], [90, 90]) * stroke(p) * ``` */ function line(start: vec2, end: vec2): PathL; /** * Creates a “dot“ path, which consists of only a M command to the specified point followed by Z command. This will be rendered only if the lineCap of the drawing context is set to `'round'` or `'square'`. * @param point The center point of the dot * @returns The newly created paths * @category Primitives * @example * ```js:pave * const a = Path.dot([50, 50]) * stroke(a, 'skyblue', 10) * ``` */ function dot(point: vec2): PathL; /** * Creates a open polyline from the given points. * @param points The points describing the polygon * @returns The newly created path * @category Primitives * @example * ```js:pave * const p = Path.polyline([10, 10], [30, 80], [80, 50]) * stroke(p) * ``` */ function polyline(...points: vec2[]): PathL; /** * Creates a closed polyline from the given points. * @param points The points describing the polygon * @returns The newly created path * @category Primitives * @example * ```js:pave * const p = Path.polygon([10, 10], [30, 80], [80, 50]) * stroke(p) * ``` */ function polygon(...points: vec2[]): PathL; /** * Creates a regular polygon. The first vertex will be placed at the +X axis relative to the center. * @param center The center of the polygon * @param radius The radius of the circumcircle of the polygon * @param sides The number o sides of the polygon * @returns The newly created path * @category Primitives * @example * ```js:pave * const p = Path.regularPolygon([50, 50], 40, 5) * stroke(p) * ``` */ function regularPolygon(center: vec2, radius: number, sides: number): PathL; /** * Alias for {@link regularPolygon} * @category Primitives */ const ngon: typeof regularPolygon; /** * @category Primitives */ function grid(rect: Rect, divs: vec2): PathL; /** * Creates a path consisting of a single C command. * @param start The start point * @param control1 The first control point * @param control2 The second control point * @param point The end point * @returns The newly created path * @category Primitives */ function cubicBezier(start: vec2, control1: vec2, control2: vec2, point: vec2): Path; /** * Creates a quadratic Bézier curve path from the given points. * @param start The start point * @param control The control point * @param point The end point * @returns THe newly created path * @category Primitives */ function quadraticBezier(start: vec2, control: vec2, point: vec2): Path; /** * Create a path consisting of cubic Bézier curves approximating the arbitrary higher-order Bézier curve. * @param points The control points of the Bézier curve * @returns The newly created path * @category Primitives */ function nBezier(points: vec2[]): Path; /** * Creates an open path consist of only a single command. * @param segment The segment to create * @returns The newly created path * @category Primitives */ function fromSegment(segment: Segment): Path; /** * The options for {@link formula} * @category Options */ interface FormulaOptions { /** * The delta value for calculating the derivative of the formula * @default 10e-6 */ delta?: number; } /** * Creates a path from the given formula, which maps a parameter `t` to a point. The tangent will be automatically calculated by the derivative function, which is computed using Euler's method with given delta. If the formula has cusps, you need to appropriately specify the range to put `t` at the cusp. * @param f The formula to create the path * @param iter The iterable object to iterate the parameter `t` * @param options The options * @returns The newly created path * @category Primitives * @example * ```js:pave * const p = formula( * t => [t * 50, 50 + scalar.sin(t * 360) * 20], * Iter.range(0, 2, .25) * ) * stroke(p) * ``` */ function formula(f: (t: number) => vec2, iter: Iterable, { delta }?: FormulaOptions): Path; /** * Returns the length of the given path. The returned value is memoized. * @param path The path to measure * @returns The length of the path * @category Properties */ const length: (arg: Path) => number; /** * Calculates the bound of the given path. * @param path The path to calculate * @returns The rect of the path * @category Properties * @example * ```js:pave * const p = Path.ellipse([50, 50], [20, 40]) * stroke(p, 'skyblue') * * const b = Path.bounds(p) * stroke(Path.rect(...b)) * ``` */ const bounds: (arg: Path) => Rect; /** * Calculates an area of the given path. * @param path The path to calculate * @returns The area of the path * @category Properties */ const area: (arg: Path) => number; /** * Returns the count of segments in the given path. * @param path The path to measure * @returns The count of segments in the path * @category Properties */ const segmentCount: (arg: Path) => number; /** * Returns the segment of the path by indices. If the segmentIndex is omitted, the curveIndex is treated as the linear segment index of the whole path. It also supports negative indices, which count from the end of the path or curve. * @param path The path that contains the segment * @param curveIndex The index of the curve. * @param segmentIndex The index of the segment in the curve. * @returns The segment * @category Properties */ function segment(path: Path, curveIndex: number, segmentIndex?: number): Segment; /** * Retrieves the segment location information from the given path and path-based signed location. * @param path The path to retrieve the segment location * @param location The path-based location * @returns The information of the segment location * @category Utilities */ function toTime(path: Path, location: PathLocation): Required & { segment: Segment; }; /** * Converts a signed linear segment index to a pair of curve and unsgined segment index. * @category Utilities */ function unlinearSegmentIndex(path: Path, linearSegmentIndex: number): { curveIndex: number; segmentIndex: number; }; /** * Calculates the position on the path at the given location. * @param path The path to calculate * @param loc The location on the path * @returns The position at the given offset * @category Properties */ function point(path: Path, loc: PathLocation): vec2; /** * Calculates the normalized tangent vector of the path at the given location. * @param path The path to calcuate * @param loc The location on the path * @returns The tangent vector * @category Properties */ function derivative(path: Path, loc: PathLocation): vec2; /** * Calculates the normalized tangent vector of the path at the given location. * @param path The path to calcuate * @param lc The location on the path * @returns The tangent vector * @category Properties */ function tangent(path: Path, loc: PathLocation): vec2; /** * Calculates the normalized tangent vector of the path at the given location. * @param path The path to calcuate * @param lc The location on the path * @returns The tangent vector * @category Properties */ function normal(path: Path, loc: PathLocation): vec2; /** * Calculates the transformation matrix of the path at the given location. The x-axis of the matrix is the tangent vector and the y-axis is the normal vector, and the translation is the point on the path. * @param path The path to calculate * @param location The locationon the path * @returns The transformation matrix at the given offset * @category Properties */ function orientation(path: Path, loc: PathLocation): mat2d; /** * Maps each segment in the path to a single or array of vertices and creates a new path concatinating those vertices. Unlike {@link spawn}, the mapping function must returns a single or multiple vertices instead of {@link Path}. So while you can change the type of commands, and change the number of them in the path, you cannot change the topology of the path. The segments that were originally continuous remains connected, and vice versa. * @param path The path to map * @param fn The vertex mapping function. It takes a {@link Segment} and returns a single or array of vertices. * @returns The newly created path * @category Modifiers */ function spawnVertex(path: Path, fn: (segment: Segment, segmentIndex: number, curve: Curve) => V2 | V2[]): Path; /** * Maps each curves in the path to a single or array of curves and creates a new path concatinating those curves. Unlike {@link spawnVertex}, you can also change the number of curves, or open/close state of the curves. * @param path The path to map * @param fn The curve mapping function. * @returns The newly created path * @category Modifiers */ function spawnCurve(path: Path, fn: (curve: Curve, curveIndex: number) => Curve | Curve[]): Path; /** * @category Options */ interface SpawnOptions { /** * If true, the continuous open path will be joined * @defaultValue true */ join?: boolean; } /** * Maps each segments in the path to a path and create a new path concatinating those paths. * @category Modifiers */ function spawn(path: Path, fn: (seg: Segment, segmentIndex: number, curve: Curve) => Path, { join }?: SpawnOptions): Path; /** * Transforms the given path by the given matrix. * @param path The path to transform * @param matrix The matrix to transform the path by * @returns The transformed path * @category Modifiers */ function transform(path: Path, matrix: mat2d): Path; /** * An options for {@link reverse} * @category Options */ interface ReverseOptions { /** * The unit to reverse the path. * @defaultValue 'path' */ per?: 'path' | 'curve'; } /** * Reverses the given path. * @param path The path to reverse * @param options: The options * @returns The reversed path * @category Modifiers */ function reverse(path: Path, { per }?: ReverseOptions): Path; /** * Trims the path from the given location to the given location. * @param path The path to trim * @param from The start location * @param to The end location * @returns The trimmed path * @category Modifiers */ function trim(path: Path, from: PathLocation, to: PathLocation, crossFirstPoint?: boolean): Path; /** * * @param path * @param angle * @returns * @category Modifiers * * @example * ```js:pave * const p = Path.arc([50, 50], 40, 0, 90) * stroke(p, 'skyblue', 5) * const pa = Path.unarc(p) * stroke(pa, 'tomato') * ``` */ function unarc(path: Path, angle?: number): UnarcPath; /** * Converts all commands in the path to cubic Bézier curve commands. * @param path The path to convert * @param unarcAngle The angle step for approximating arc commands with cubic Béziers * @returns The new path with only cubic Bézier curve commands * @category Modifiers */ function toCubicBezier(path: Path, unarcAngle?: number): PathC; /** * Alias for {@link toCubicBezier} * @category Aliases */ const toC: typeof toCubicBezier; /** * @category Options */ interface OffsetOptions { /** * The cap style of offset path */ cap?: PaperOffsetOptions['cap']; /** * The join style of offset path * @defaultValue 'miter' */ join?: CanvasLineJoin; /** * The limit for miter style * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit * @defaultValue 10 */ miterLimit?: number; } /** * Creates an offset path from the given path. * @param path The path to offset * @param offset The width of offset * @param options The options * @returns The newly created path * @category Modifiers * @example * ```js:pave * const p = Path.ngon([50, 50], 20, 5) * stroke(p, 'skyblue') * const po = Path.offset(p, 10, {lineJoin: 'round'}) * stroke(po, 'tomato') * ``` */ function offset(path: Path, offset: number, options?: OffsetOptions): Path; /** * @category Options */ interface OffsetStrokeOptions extends OffsetOptions { /** * The cap style of offset path (`'square'` will be supported in future) * @defaultValue 'butt' */ lineCap?: 'butt' | 'round'; } /** * Creates an offset path from the given path. * @param path The path to offset * @param width The width of stroke * @param options The options * @returns The newly created path * @category Modifiers * @example * ```js:pave * const p = Path.ngon([50, 50], 20, 5) * stroke(p, 'skyblue') * const po = Path.offsetStroke(p, 20, {lineJoin: 'round'}) * stroke(po, 'tomato') * ``` */ function offsetStroke(path: Path, width: number, options?: OffsetStrokeOptions): Path; /** * Joins the given paths into a single open paths. * @param paths The paths to join * @returns The joined path * @category Modifiers */ function join(paths: Path[]): Path; /** * Merges the given paths into a single path. Unlike {@link join} or {@link unite}, the vertices are not connected, and it simply returns compound path. * @category Modifiers */ function merge(pathOrCurves: (Path | Curve)[]): Path; /** * Flattens the curves in path to straight lines. * @see http://paperjs.org/reference/path/#flatten * @param path The path to flatten * @param flatness The maximum distance between the path and the flattened path * @returns The flattened path consists of only M, L, and Z commands * @category Modifiers * @example * ```js:pave * const c = Path.circle([50, 50], 40) * stroke(c, 'skyblue') * * const fc = Path.flatten(c, 10) * stroke(fc, 'purple') * ``` */ function flatten(path: Path, flatness?: number): Path; /** * Subdivides each segment in the path into specific number of sub-segments. * @param path The path to subdivide * @param division The number of division for each segment * @returns The newly created path * @category Modifiers */ function subdivide(path: Path, division: number): Path; /** * Alias for {@link subdivide} * @category Aliases */ const subdiv: typeof subdivide; /** * Splits the path into multiple paths at the given locations. * @param path The path to split * @param locs The locations to split * @returns The splitted paths * @category Modifiers */ function split(path: Path, locs: Iterable): Path[]; /** * @category Options */ interface DistortOptions { /** * The angle step for approximating arc commands with cubic Béziers * @default 5 */ unarcAngle?: number; /** * The number of subdivision for each segment * @default 1 (no subdivision applied) */ subdivide?: number; } /** * Distorts path by the given transformation function. It assumes that the continuity of transformation is smooth in the spatial domain and has no singularities or cusps. * @param path The path to distort * @param transform The distort function that maps a point coordinate to a transformation matrix. The translation component is absolute, and affects points of Bézier curves. The rotation, scaling, and skewing components affect the orientation of two handles. * @returns The newly created path * @category Modifiers * * @example * ```js:pave * let p = Path.line([10, 50], [90, 50]) * stroke(p, 'skyblue') * * const wave = (freq, width) => ([x, y]) => { * const phase = x * freq * return [ * 1, scalar.cos(phase) * width * freq, * 0, 1, * x, y + scalar.sin(phase) * width * ] * } * * debug(Path.distort(p, wave(.2, 10), {subdivide: 10})) * ``` */ function distort(path: Path, transform: (position: vec2) => mat2d, { unarcAngle, subdivide }?: DistortOptions): Path; /** * Chamfers the given path. * @param path The path to chamfer * @param distance The distance of chamfer * @returns The newly created path * @category Modifiers */ function chamfer(path: Path, distance: number): Path; /** * Fillets the given path. * @param path The path to fillet * @param radius The radius of fillet * @returns The newly created path * @category Modifiers */ function fillet(path: Path, radius: number): Path; /** * Unites the given paths. * @param paths The paths to unite * @returns The resulting path * @category Boolean Operations */ function unite(paths: Path[]): Path; /** * Subtracts the tools from the subject. * @param subject The target path to be subtracted * @param tools The paths to subtract * @returns The resulting path * @category Boolean Operations */ function subtract(subject: Path, tools: Path[]): Path; /** * Parses the given d attribute of an SVG path and creates a new path. Internally uses [svgpath](https://github.com/fontello/svgpath) library. * @param d The d attribute of an SVG path * @returns The newly created path * @category Converters */ function fromSVGString(d: string): Path; /** * Alias for {@link fromSVGString} * @category Aliases */ const fromD: typeof fromSVGString; /** * Converts the given path to a string that can be used as the d attribute of an SVG path element. * @param path The path to convert * @returns The string for the d attribute of the SVG path element * @category Converters */ function toSVGString(path: Path): string; /** * Alias for {@link toSVGString} * @category Aliases */ const toD: typeof toSVGString; /** * Returns all segmentse * @param path The path to iterate * @category Properties */ const segments: (arg: Path) => Segment[]; /** * Converts an array of SVG commands to a {@link Path}. * @param commands The array of SVG commands * @returns The newly created path * @category Converters */ function fromSVG(commands: SVGCommand[]): Path; /** * Creates a Path2D instance with the given path data. * @param path The path to convert * @returns The newly created Path2D * @category Converters */ const toPath2D: (arg: Path) => Path2D; /** * Draws the given path to the context. It calls `context.beginPath` at the beginning, so please note that the sub-paths already stacked on the context are also cleared. Note that you also need to call `context.stroke` or `context.fill` to actually draw the path. * @param path The path to draw * @param context The Canvas context * @category Converters */ function drawToCanvas(path: Path, context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void; /** * Draws the given path to the context. It calls [`beginShape`](https://p5js.org/reference/p5/beginShape) at the beginning, drawing the path with `vertex` and `bezierVertex` commands, then calls [`endShape`](https://p5js.org/reference/p5/endShape) at the end if the curve is closed. * @param path The path to draw * @param p5Instance The p5.js instance. Pass the instance only if you are using p5.js in instance mode. * @category Converters */ function drawToP5(path: Path, p5Instance?: p5 | Window): void; /** * Converts the given path to paper.Path * @see http://paperjs.org/reference/pathitem/ * @param path The path to convert * @returns The newly created paper.Path instance * @category Converters */ const toPaperPath: (arg: Path) => paper.Path | paper.CompoundPath; /** * Creates a path from the given paper.Path instance. * @param paperPath The paper.Path instance to convert * @returns The newly created path * @category Converters */ const fromPaperPath: (arg: paper.PathItem) => Path; /** * Returns the new path with the new M (move-to) command at the end. * @param path The base path * @param point The point to move to * @returns The newely created path * @category Draw Functions */ function moveTo(path: Path, point: vec2): Path; /** * Appends the given command to the end of the path. * @param path The base path * @param point The newly added point * @param command The command to append * @returns The newely created path * @category Draw Functions */ function addVertex(path: Path, vertex: Vertex): Path; /** * Returns the new path with the new L (line-to) command at the end. * @param path The base path * @param point The point to draw a line to * @returns The newely created path * @category Draw Functions */ function lineTo(path: Path, point: vec2): Path; /** * Returns the new path with the new C (cubic Bézier curve) command at the end. * @param path The base path * @param control1 The first control point * @param control2 The second control point * @param point The end point * @returns The newely created path * @category Draw Functions */ function cubicBezierTo(path: Path, control1: vec2, control2: vec2, point: vec2): Path; /** * Returns the new path with the new Q (quadratic Bézier curve) command at the end. * @param path The base path * @param control The control point * @param point The end point * @returns The newely created path * @category Draw Functions */ function quadraticBezierTo(path: Path, control: vec2, point: vec2): Path; /** * Returns the new path with the new A (arc) command at the end. * @param path The base path * @param radii The radii of the ellipse used to draw the arc * @param xAxisRotation The rotation angle of the ellipse's x-axis relative to the x-axis of the current coordinate system, expressed in degrees * @param largeArcFlag The large arc flag. If true, then draw the arc spanning greather than 180 degrees. Otherwise, draw the arc spanning less than 180 degrees. * @param sweepFlag The sweep flag. If true, then draw the arc in a "positive-angle" direction in the current coordinate system. Otherwise, draw it in a "negative-angle" direction. * @param point The end point of the arc * @returns The newely created path * @category Draw Functions */ function arcTo(path: Path, radii: vec2, xAxisRotation: number, largeArcFlag: boolean, sweepFlag: boolean, point: vec2): Path; /** * An options for {@link close} * @category Options */ type PathCloseOptions = { /** * If true, deletes overwrapped first and last vertices. * @default true */ fuse?: boolean; /** * Specifies which curves to close. Default is the last curve. * @default -1 */ group?: CurveGroup; }; /** * Closes the specified curves * @param path The base path * @returns The newely created path * @category Draw Functions */ function close(path: Path, { fuse, group }?: PathCloseOptions): Path; /** * An options for {@link reduce} * @category Options */ type ReduceOptions = Curve.ReduceOptions & { /** * If true, removes the curves with zero length * @default true */ removeEmptyCurves?: boolean; }; /** * Cleans up the path by removing redundant vertices and * @param path * @category Modifiers */ function reduce(path: Path, options?: ReduceOptions): Path; /** * Creates a new {@link Path} instance to begin drawing a path. * @category Draw Functions */ function pen(): Pen; /** * A class for creating a path by calling draw functions, like Canvas API. * @category Draw Functions */ class Pen { #private; current: { curve: Curve; point: vec2; lastHandle?: vec2; } | undefined; moveTo(point: vec2): this; M(point: vec2): this; moveBy(delta: vec2): this; m(delta: vec2): this; lineTo(point: vec2): this; L(point: vec2): this; lineBy(delta: vec2): this; l(delta: vec2): this; horizTo(x: number): this; H(x: number): this; horizBy(dx: number): this; h(dx: number): this; vertTo(y: number): this; V(y: number): this; vertBy(dy: number): this; v(dy: number): this; quadraticCurveTo(control: vec2, point: vec2): this; Q(control: vec2, point: vec2): this; quadraticCurveBy(deltaControl: vec2, deltaPoint: vec2): this; q(delta: vec2, delta2: vec2): this; smoothQuadraticCurveTo(point: vec2): this; T(point: vec2): this; smoothQuadraticCurveBy(delta: vec2): this; t(delta: vec2): this; cubicBezierTo(control1: vec2, control2: vec2, point: vec2): this; C(control1: vec2, control2: vec2, point: vec2): this; cubicBezierBy(deltaControl1: vec2, deltaControl2: vec2, deltaPoint: vec2): this; c(deltaControl1: vec2, deltaControl2: vec2, deltaPoint: vec2): this; smoothCubicBezierTo(control2: vec2, point: vec2): this; S(control2: vec2, point: vec2): this; smoothCubicBezierBy(deltaControl2: vec2, deltaPoint: vec2): this; s(deltaControl2: vec2, deltaPoint: vec2): this; arcTo(radii: vec2, xAxisRotation: number, largeArcFlag: boolean, sweepFlag: boolean, point: vec2): this; A(radii: vec2, xAxisRotation: number, largeArcFlag: boolean, sweepFlag: boolean, point: vec2): this; arcBy(radii: vec2, xAxisRotation: number, largeArcFlag: boolean, sweepFlag: boolean, deltaPoint: vec2): this; a(radii: vec2, xAxisRotation: number, largeArcFlag: boolean, sweepFlag: boolean, deltaPoint: vec2): this; close(removeOverwrapped?: boolean): this; Z(removeOverwrapped?: boolean): this; /** * Returns the path drawn by the pen so far. */ get(): Path; } } export {}; //# sourceMappingURL=Path.d.ts.map