UNPKG

paper

Version:

The Swiss Army Knife of Vector Graphics Scripting

1,521 lines (1,324 loc) 264 kB
/*! * Paper.js v0.12.18 - The Swiss Army Knife of Vector Graphics Scripting. * http://paperjs.org/ * * Copyright (c) 2011 - 2020, Jürg Lehni & Jonathan Puckey * http://juerglehni.com/ & https://puckey.studio/ * * Distributed under the MIT license. See LICENSE file for details. * * All rights reserved. * * Date: Wed Jul 17 14:57:24 2024 +0200 * * This is an auto-generated type definition. */ declare namespace paper { type PointLike = ( Point | [ number, number ] | { x: number, y: number } | { width: number, height: number } | { angle: number, length: number } ) type SizeLike = ( Size | [ number, number ] | { x: number, y: number } | { width: number, height: number } ) type RectangleLike = ( Rectangle | [ number, number, number, number ] | { x: number, y: number, width: number, height: number } | { from: PointLike, to: PointLike } ) /** * All properties and functions that expect color values in the form * of instances of Color objects, also accept named colors and hex values as * strings which are then converted to instances of * {@link Color} internally. */ class Color { /** * The type of the color as a string. */ type: string /** * The color components that define the color, including the alpha value * if defined. */ readonly components: number[] /** * The color's alpha value as a number between `0` and `1`. * All colors of the different subclasses support alpha values. */ alpha: number /** * The amount of red in the color as a value between `0` and `1`. */ red: number /** * The amount of green in the color as a value between `0` and `1`. */ green: number /** * The amount of blue in the color as a value between `0` and `1`. */ blue: number /** * The amount of gray in the color as a value between `0` and `1`. */ gray: number /** * The hue of the color as a value in degrees between `0` and `360`. */ hue: number /** * The saturation of the color as a value between `0` and `1`. */ saturation: number /** * The brightness of the color as a value between `0` and `1`. */ brightness: number /** * The lightness of the color as a value between `0` and `1`. * * Note that all other components are shared with HSB. */ lightness: number /** * The gradient object describing the type of gradient and the stops. */ gradient: Gradient /** * The highlight point of the gradient. */ highlight: Point /** * Creates a RGB Color object. * * @param red - the amount of red in the color as a value between * `0` and `1` * @param green - the amount of green in the color as a value * between `0` and `1` * @param blue - the amount of blue in the color as a value * between `0` and `1` * @param alpha - the alpha of the color as a value between `0` * and `1` */ constructor(red: number, green: number, blue: number, alpha?: number) /** * Creates a gray Color object. * * @param gray - the amount of gray in the color as a value * between `0` and `1` * @param alpha - the alpha of the color as a value between `0` * and `1` */ constructor(gray: number, alpha?: number) /** * Creates a Color object from a CSS string. All common CSS color string * formats are supported: * - Named colors (e.g. `'red'`, `'fuchsia'`, …) * - Hex strings (`'#ffff00'`, `'#ff0'`, …) * - RGB strings (`'rgb(255, 128, 0)'`, `'rgba(255, 128, 0, 0.5)'`, …) * - HSL strings (`'hsl(180deg, 20%, 50%)'`, * `'hsla(3.14rad, 20%, 50%, 0.5)'`, …) * * @param color - the color's CSS string representation */ constructor(color: string) /** * Creates a gradient Color object. */ constructor(gradient: Gradient, origin: PointLike, destination: PointLike, highlight?: PointLike) /** * Creates a HSB, HSL or gradient Color object from the properties of * the provided object: * * @option hsb.hue {Number} the hue of the color as a value in degrees * between `0` and `360` * @option hsb.saturation {Number} the saturation of the color as a * value between `0` and `1` * @option hsb.brightness {Number} the brightness of the color as a * value between `0` and `1` * @option hsb.alpha {Number} the alpha of the color as a value between * `0` and `1` * @option hsl.hue {Number} the hue of the color as a value in degrees * between `0` and `360` * @option hsl.saturation {Number} the saturation of the color as a * value between `0` and `1` * @option hsl.lightness {Number} the lightness of the color as a value * between `0` and `1`<br> * @option hsl.alpha {Number} the alpha of the color as a value between * `0` and `1` * @option gradient.gradient {Gradient} the gradient object that * describes the color stops and type of gradient to be used * @option gradient.origin {Point} the origin point of the gradient * @option gradient.destination {Point} the destination point of the * gradient * @option gradient.stops {GradientStop[]} the gradient stops describing * the gradient, as an alternative to providing a gradient object * @option gradient.radial {Boolean} controls whether the gradient is * radial, as an alternative to providing a gradient object * * @param object - an object describing the components and * properties of the color */ constructor(object: object) /** * Sets the color to the passed values. Note that any sequence of * parameters that is supported by the various {@link Color} * constructors also work for calls of `set()`. */ set(...values: any[]): Color /** * Converts the color to another type. * * @param type - the color type to convert to. Possible values: * {@values 'rgb', 'gray', 'hsb', 'hsl'} * * @return the converted color as a new instance */ convert(type: string): Color /** * Checks if the color has an alpha value. * * @return true if the color has an alpha value */ hasAlpha(): boolean /** * Checks if the component color values of the color are the * same as those of the supplied one. * * @param color - the color to compare with * * @return true if the colors are the same */ equals(color: Color): boolean /** * @return a copy of the color object */ clone(): Color /** * @return a string representation of the color */ toString(): string /** * Returns the color as a CSS string. * * @param hex - whether to return the color in hexadecimal * representation or as a CSS RGB / RGBA string. * * @return a CSS string representation of the color */ toCSS(hex: boolean): string /** * Transform the gradient color by the specified matrix. * * @param matrix - the matrix to transform the gradient color by */ transform(matrix: Matrix): void /** * Returns a color object with random {@link #red}, {@link #green} * and {@link #blue} values between `0` and `1`. * * @return the newly created color object */ static random(): Color /** * Returns the addition of the supplied value to both coordinates of * the color as a new color. * The object itself is not modified! * * @param number - the number to add * * @return the addition of the color and the value as a new * color */ add(number: number): Color /** * Returns the addition of the supplied color to the color as a new * color. * The object itself is not modified! * * @param color - the color to add * * @return the addition of the two colors as a new color */ add(color: Color): Color /** * Returns the subtraction of the supplied value to both coordinates of * the color as a new color. * The object itself is not modified! * * @param number - the number to subtract * * @return the subtraction of the color and the value as a new * color */ subtract(number: number): Color /** * Returns the subtraction of the supplied color to the color as a new * color. * The object itself is not modified! * * @param color - the color to subtract * * @return the subtraction of the two colors as a new color */ subtract(color: Color): Color /** * Returns the multiplication of the supplied value to both coordinates * of the color as a new color. * The object itself is not modified! * * @param number - the number to multiply * * @return the multiplication of the color and the value as a * new color */ multiply(number: number): Color /** * Returns the multiplication of the supplied color to the color as a * new color. * The object itself is not modified! * * @param color - the color to multiply * * @return the multiplication of the two colors as a new color */ multiply(color: Color): Color /** * Returns the division of the supplied value to both coordinates of * the color as a new color. * The object itself is not modified! * * @param number - the number to divide * * @return the division of the color and the value as a new * color */ divide(number: number): Color /** * Returns the division of the supplied color to the color as a new * color. * The object itself is not modified! * * @param color - the color to divide * * @return the division of the two colors as a new color */ divide(color: Color): Color } /** * A compound path is a complex path that is made up of one or more * simple sub-paths. It can have the `nonzero` fill rule, or the `evenodd` rule * applied. Both rules use mathematical equations to determine if any region is * outside or inside the final shape. The `evenodd` rule is more predictable: * Every other region within a such a compound path is a hole, regardless of * path direction. * * All the paths in a compound path take on the style of the compound path and * can be accessed through its {@link Item#children} list. */ class CompoundPath extends PathItem { /** * Specifies whether the compound-path is fully closed, meaning all its * contained sub-paths are closed path. * * @see Path#closed */ closed: boolean /** * The first Segment contained within the compound-path, a short-cut to * calling {@link Path#firstSegment} on {@link Item#firstChild}. */ readonly firstSegment: Segment /** * The last Segment contained within the compound-path, a short-cut to * calling {@link Path#lastSegment} on {@link Item#lastChild}. */ readonly lastSegment: Segment /** * All the curves contained within the compound-path, from all its child * {@link Path} items. */ readonly curves: Curve[] /** * The first Curve contained within the compound-path, a short-cut to * calling {@link Path#firstCurve} on {@link Item#firstChild}. */ readonly firstCurve: Curve /** * The last Curve contained within the compound-path, a short-cut to * calling {@link Path#lastCurve} on {@link Item#lastChild}. */ readonly lastCurve: Curve /** * The area that the compound-path's geometry is covering, calculated by * getting the {@link Path#area} of each sub-path and it adding up. * Note that self-intersecting paths and sub-paths of different orientation * can result in areas that cancel each other out. */ readonly area: number /** * The total length of all sub-paths in this compound-path, calculated by * getting the {@link Path#length} of each sub-path and it adding up. */ readonly length: number /** * Creates a new compound path item from SVG path-data and places it at the * top of the active layer. * * @param pathData - the SVG path-data that describes the geometry * of this path */ constructor(pathData: string) /** * Creates a new compound path item from an object description and places it * at the top of the active layer. * * @param object - an object containing properties to be set on the * path */ constructor(object: object) } /** * The Curve object represents the parts of a path that are connected by * two following {@link Segment} objects. The curves of a path can be accessed * through its {@link Path#curves} array. * * While a segment describe the anchor point and its incoming and outgoing * handles, a Curve object describes the curve passing between two such * segments. Curves and segments represent two different ways of looking at the * same thing, but focusing on different aspects. Curves for example offer many * convenient ways to work with parts of the path, finding lengths, positions or * tangents at given offsets. */ class Curve { /** * The first anchor point of the curve. */ point1: Point /** * The second anchor point of the curve. */ point2: Point /** * The handle point that describes the tangent in the first anchor point. */ handle1: Point /** * The handle point that describes the tangent in the second anchor point. */ handle2: Point /** * The first segment of the curve. */ readonly segment1: Segment /** * The second segment of the curve. */ readonly segment2: Segment /** * The path that the curve belongs to. */ readonly path: Path /** * The index of the curve in the {@link Path#curves} array. */ readonly index: number /** * The next curve in the {@link Path#curves} array that the curve * belongs to. */ readonly next: Curve /** * The previous curve in the {@link Path#curves} array that the curve * belongs to. */ readonly previous: Curve /** * Specifies whether the points and handles of the curve are selected. */ selected: boolean /** * An array of 8 float values, describing this curve's geometry in four * absolute x/y pairs (point1, handle1, handle2, point2). This format is * used internally for efficient processing of curve geometries, e.g. when * calculating intersections or bounds. * * Note that the handles are converted to absolute coordinates. */ readonly values: number[] /** * An array of 4 point objects, describing this curve's geometry in absolute * coordinates (point1, handle1, handle2, point2). * * Note that the handles are converted to absolute coordinates. */ readonly points: Point[] /** * The approximated length of the curve. */ readonly length: number /** * The area that the curve's geometry is covering. */ readonly area: number /** * The bounding rectangle of the curve excluding stroke width. */ bounds: Rectangle /** * The bounding rectangle of the curve including stroke width. */ strokeBounds: Rectangle /** * The bounding rectangle of the curve including handles. */ handleBounds: Rectangle /** * Creates a new curve object. */ constructor(segment1: Segment, segment2: Segment) /** * Creates a new curve object. */ constructor(point1: PointLike, handle1: PointLike, handle2: PointLike, point2: PointLike) /** * Returns a copy of the curve. */ clone(): Curve /** * @return a string representation of the curve */ toString(): string /** * Determines the type of cubic Bézier curve via discriminant * classification, as well as the curve-time parameters of the associated * points of inflection, loops, cusps, etc. * * @return the curve classification information as an object, see * options */ classify(): object /** * Removes the curve from the path that it belongs to, by removing its * second segment and merging its handle with the first segment. * * @return true if the curve was removed */ remove(): boolean /** * Checks if the this is the first curve in the {@link Path#curves} array. * * @return true if this is the first curve */ isFirst(): boolean /** * Checks if the this is the last curve in the {@link Path#curves} array. * * @return true if this is the last curve */ isLast(): boolean /** * Creates a new curve as a sub-curve from this curve, its range defined by * the given curve-time parameters. If `from` is larger than `to`, then * the resulting curve will have its direction reversed. * * @param from - the curve-time parameter at which the sub-curve * starts * @param to - the curve-time parameter at which the sub-curve * ends * * @return the newly create sub-curve */ getPart(from: number, to: number): Curve /** * Divides the curve into two curves at the given offset or location. The * curve itself is modified and becomes the first part, the second part is * returned as a new curve. If the curve belongs to a path item, a new * segment is inserted into the path at the given location, and the second * part becomes a part of the path as well. * * @see #divideAtTime(time) * * @param location - the offset or location on the * curve at which to divide * * @return the second part of the divided curve if the location is * valid, {code null} otherwise */ divideAt(location: number | CurveLocation): Curve /** * Divides the curve into two curves at the given curve-time parameter. The * curve itself is modified and becomes the first part, the second part is * returned as a new curve. If the modified curve belongs to a path item, * the second part is also added to the path. * * @see #divideAt(offset) * * @param time - the curve-time parameter on the curve at which to * divide * * @return the second part of the divided curve, if the offset is * within the valid range, {code null} otherwise. */ divideAtTime(time: number): Curve /** * Splits the path this curve belongs to at the given offset. After * splitting, the path will be open. If the path was open already, splitting * will result in two paths. * * @see Path#splitAt(offset) * * @param location - the offset or location on the * curve at which to split * * @return the newly created path after splitting, if any */ splitAt(location: number | CurveLocation): Path /** * Splits the path this curve belongs to at the given offset. After * splitting, the path will be open. If the path was open already, splitting * will result in two paths. * * @see Path#splitAt(offset) * * @param time - the curve-time parameter on the curve at which to * split * * @return the newly created path after splitting, if any */ splitAtTime(time: number): Path /** * Returns a reversed version of the curve, without modifying the curve * itself. * * @return a reversed version of the curve */ reversed(): Curve /** * Clears the curve's handles by setting their coordinates to zero, * turning the curve into a straight line. */ clearHandles(): void /** * Checks if this curve has any curve handles set. * * @see Curve#handle1 * @see Curve#handle2 * @see Segment#hasHandles() * @see Path#hasHandles() * * @return true if the curve has handles set */ hasHandles(): boolean /** * Checks if this curve has any length. * * @param epsilon - the epsilon against which to compare the * curve's length * * @return true if the curve is longer than the given epsilon */ hasLength(epsilon?: number): boolean /** * Checks if this curve appears as a straight line. This can mean that * it has no handles defined, or that the handles run collinear with the * line that connects the curve's start and end point, not falling * outside of the line. * * @return true if the curve is straight */ isStraight(): boolean /** * Checks if this curve is parametrically linear, meaning that it is * straight and its handles are positioned at 1/3 and 2/3 of the total * length of the curve. * * @return true if the curve is parametrically linear */ isLinear(): boolean /** * Checks if the the two curves describe straight lines that are * collinear, meaning they run in parallel. * * @param curve - the other curve to check against * * @return true if the two lines are collinear */ isCollinear(curve: Curve): boolean /** * Checks if the curve is a straight horizontal line. * * @return true if the line is horizontal */ isHorizontal(): boolean /** * Checks if the curve is a straight vertical line. * * @return true if the line is vertical */ isVertical(): boolean /** * Calculates the curve location at the specified offset on the curve. * * @param offset - the offset on the curve * * @return the curve location at the specified the offset */ getLocationAt(offset: number): CurveLocation /** * Calculates the curve location at the specified curve-time parameter on * the curve. * * @param time - the curve-time parameter on the curve * * @return the curve location at the specified the location */ getLocationAtTime(time: number): CurveLocation /** * Calculates the curve-time parameter of the specified offset on the path, * relative to the provided start parameter. If offset is a negative value, * the parameter is searched to the left of the start parameter. If no start * parameter is provided, a default of `0` for positive values of `offset` * and `1` for negative values of `offset`. * * @param offset - the offset at which to find the curve-time, in * curve length units * @param start - the curve-time in relation to which the offset is * determined * * @return the curve-time parameter at the specified location */ getTimeAt(offset: number, start?: number): number /** * Calculates the curve-time parameters where the curve is tangential to * provided tangent. Note that tangents at the start or end are included. * * @param tangent - the tangent to which the curve must be tangential * * @return at most two curve-time parameters, where the curve is * tangential to the given tangent */ getTimesWithTangent(tangent: PointLike): number[] /** * Calculates the curve offset at the specified curve-time parameter on * the curve. * * @param time - the curve-time parameter on the curve * * @return the curve offset at the specified the location */ getOffsetAtTime(time: number): number /** * Returns the curve location of the specified point if it lies on the * curve, `null` otherwise. * * @param point - the point on the curve * * @return the curve location of the specified point */ getLocationOf(point: PointLike): CurveLocation /** * Returns the length of the path from its beginning up to up to the * specified point if it lies on the path, `null` otherwise. * * @param point - the point on the path * * @return the length of the path up to the specified point */ getOffsetOf(point: PointLike): number /** * Returns the curve-time parameter of the specified point if it lies on the * curve, `null` otherwise. * Note that if there is more than one possible solution in a * self-intersecting curve, the first found result is returned. * * @param point - the point on the curve * * @return the curve-time parameter of the specified point */ getTimeOf(point: PointLike): number /** * Returns the nearest location on the curve to the specified point. * * @param point - the point for which we search the nearest location * * @return the location on the curve that's the closest to * the specified point */ getNearestLocation(point: PointLike): CurveLocation /** * Returns the nearest point on the curve to the specified point. * * @param point - the point for which we search the nearest point * * @return the point on the curve that's the closest to the * specified point */ getNearestPoint(point: PointLike): Point /** * Calculates the point on the curve at the given location. * * @param location - the offset or location on the * curve * * @return the point on the curve at the given location */ getPointAt(location: number | CurveLocation): Point /** * Calculates the normalized tangent vector of the curve at the given * location. * * @param location - the offset or location on the * curve * * @return the normalized tangent of the curve at the given location */ getTangentAt(location: number | CurveLocation): Point /** * Calculates the normal vector of the curve at the given location. * * @param location - the offset or location on the * curve * * @return the normal of the curve at the given location */ getNormalAt(location: number | CurveLocation): Point /** * Calculates the weighted tangent vector of the curve at the given * location, its length reflecting the curve velocity at that location. * * @param location - the offset or location on the * curve * * @return the weighted tangent of the curve at the given location */ getWeightedTangentAt(location: number | CurveLocation): Point /** * Calculates the weighted normal vector of the curve at the given location, * its length reflecting the curve velocity at that location. * * @param location - the offset or location on the * curve * * @return the weighted normal of the curve at the given location */ getWeightedNormalAt(location: number | CurveLocation): Point /** * Calculates the curvature of the curve at the given location. Curvatures * indicate how sharply a curve changes direction. A straight line has zero * curvature, where as a circle has a constant curvature. The curve's radius * at the given location is the reciprocal value of its curvature. * * @param location - the offset or location on the * curve * * @return the curvature of the curve at the given location */ getCurvatureAt(location: number | CurveLocation): number /** * Calculates the point on the curve at the given location. * * @param time - the curve-time parameter on the curve * * @return the point on the curve at the given location */ getPointAtTime(time: number): Point /** * Calculates the normalized tangent vector of the curve at the given * location. * * @param time - the curve-time parameter on the curve * * @return the normalized tangent of the curve at the given location */ getTangentAtTime(time: number): Point /** * Calculates the normal vector of the curve at the given location. * * @param time - the curve-time parameter on the curve * * @return the normal of the curve at the given location */ getNormalAtTime(time: number): Point /** * Calculates the weighted tangent vector of the curve at the given * location, its length reflecting the curve velocity at that location. * * @param time - the curve-time parameter on the curve * * @return the weighted tangent of the curve at the given location */ getWeightedTangentAtTime(time: number): Point /** * Calculates the weighted normal vector of the curve at the given location, * its length reflecting the curve velocity at that location. * * @param time - the curve-time parameter on the curve * * @return the weighted normal of the curve at the given location */ getWeightedNormalAtTime(time: number): Point /** * Calculates the curvature of the curve at the given location. Curvatures * indicate how sharply a curve changes direction. A straight line has zero * curvature, where as a circle has a constant curvature. The curve's radius * at the given location is the reciprocal value of its curvature. * * @param time - the curve-time parameter on the curve * * @return the curvature of the curve at the given location */ getCurvatureAtTime(time: number): number /** * Returns all intersections between two {@link Curve} objects as an * array of {@link CurveLocation} objects. * * @param curve - the other curve to find the intersections with * (if the curve itself or `null` is passed, the self intersection * of the curve is returned, if it exists) * * @return the locations of all intersections between * the curves */ getIntersections(curve: Curve): CurveLocation[] } /** * CurveLocation objects describe a location on {@link Curve} objects, as * defined by the curve-time {@link #time}, a value between `0` (beginning * of the curve) and `1` (end of the curve). If the curve is part of a * {@link Path} item, its {@link #index} inside the {@link Path#curves} * array is also provided. * * The class is in use in many places, such as * {@link Path#getLocationAt}, * {@link Path#getLocationOf}, * {@link PathItem#getNearestLocation}, * {@link PathItem#getIntersections}, * etc. */ class CurveLocation { /** * The segment of the curve which is closer to the described location. */ readonly segment: Segment /** * The curve that this location belongs to. */ readonly curve: Curve /** * The path that this locations is situated on. */ readonly path: Path /** * The index of the {@link #curve} within the {@link Path#curves} list, if * it is part of a {@link Path} item. */ readonly index: number /** * The curve-time parameter, as used by various bezier curve calculations. * It is value between `0` (beginning of the curve) and `1` (end of the * curve). */ readonly time: number /** * The point which is defined by the {@link #curve} and * {@link #time}. */ readonly point: Point /** * The length of the path from its beginning up to the location described * by this object. If the curve is not part of a path, then the length * within the curve is returned instead. */ readonly offset: number /** * The length of the curve from its beginning up to the location described * by this object. */ readonly curveOffset: number /** * The curve location on the intersecting curve, if this location is the * result of a call to {@link PathItem#getIntersections} / * {@link Curve#getIntersections}. */ readonly intersection: CurveLocation /** * The tangential vector to the {@link #curve} at the given location. */ readonly tangent: Point /** * The normal vector to the {@link #curve} at the given location. */ readonly normal: Point /** * The curvature of the {@link #curve} at the given location. */ readonly curvature: number /** * The distance from the queried point to the returned location. * * @see Curve#getNearestLocation(point) * @see PathItem#getNearestLocation(point) */ readonly distance: number /** * Creates a new CurveLocation object. */ constructor(curve: Curve, time: number, point?: PointLike) /** * Checks whether tow CurveLocation objects are describing the same location * on a path, by applying the same tolerances as elsewhere when dealing with * curve-time parameters. * * @return true if the locations are equal */ equals(location: CurveLocation): boolean /** * @return a string representation of the curve location */ toString(): string /** * Checks if the location is an intersection with another curve and is * merely touching the other curve, as opposed to crossing it. * * @see #isCrossing() * * @return true if the location is an intersection that is * merely touching another curve */ isTouching(): boolean /** * Checks if the location is an intersection with another curve and is * crossing the other curve, as opposed to just touching it. * * @see #isTouching() * * @return true if the location is an intersection that is * crossing another curve */ isCrossing(): boolean /** * Checks if the location is an intersection with another curve and is * part of an overlap between the two involved paths. * * @see #isCrossing() * @see #isTouching() * * @return true if the location is an intersection that is * part of an overlap between the two involved paths */ hasOverlap(): boolean } /** * The Event object is the base class for any of the other event types, * such as {@link MouseEvent}, {@link ToolEvent} and {@link KeyEvent}. */ class Event { /** * The time at which the event was created, in milliseconds since the epoch. */ readonly timeStamp: number /** * The current state of the keyboard modifiers. * * @see Key.modifiers */ readonly modifiers: any /** * Cancels the event if it is cancelable, without stopping further * propagation of the event. */ preventDefault(): void /** * Prevents further propagation of the current event. */ stopPropagation(): void /** * Cancels the event if it is cancelable, and stops stopping further * propagation of the event. This is has the same effect as calling both * {@link #stopPropagation} and {@link #preventDefault}. * * Any handler can also return `false` to indicate that `stop()` should be * called right after. */ stop(): void } /** * The Gradient object. */ class Gradient { /** * The gradient stops on the gradient ramp. */ stops: GradientStop[] /** * Specifies whether the gradient is radial or linear. */ radial: boolean /** * @return a copy of the gradient */ clone(): Gradient /** * Checks whether the gradient is equal to the supplied gradient. * * @return true if they are equal */ equals(gradient: Gradient): boolean } /** * The GradientStop object. */ class GradientStop { /** * The ramp-point of the gradient stop as a value between `0` and `1`. */ offset: number /** * The color of the gradient stop. */ color: Color /** * Creates a GradientStop object. * * @param color - the color of the stop * @param offset - the position of the stop on the gradient * ramp as a value between `0` and `1`; `null` or `undefined` for automatic * assignment. */ constructor(color?: Color, offset?: number) /** * @return a copy of the gradient-stop */ clone(): GradientStop } /** * A Group is a collection of items. When you transform a Group, its * children are treated as a single unit without changing their relative * positions. */ class Group extends Item { /** * Specifies whether the group item is to be clipped. When setting to * `true`, the first child in the group is automatically defined as the * clipping mask. */ clipped: boolean /** * Creates a new Group item and places it at the top of the active layer. * * @param children - An array of children that will be added to the * newly created group */ constructor(children?: Item[]) /** * Creates a new Group item and places it at the top of the active layer. * * @param object - an object containing the properties to be set on * the group */ constructor(object: object) } /** * A HitResult object contains information about the results of a hit * test. It is returned by {@link Item#hitTest} and * {@link Project#hitTest}. */ class HitResult { /** * Describes the type of the hit result. For example, if you hit a segment * point, the type would be `'segment'`. */ type: string /** * If the HitResult has a {@link HitResult#type} of `'bounds'`, this * property describes which corner of the bounding rectangle was hit. */ name: string /** * The item that was hit. */ item: Item /** * If the HitResult has a type of 'curve' or 'stroke', this property gives * more information about the exact position that was hit on the path. */ location: CurveLocation /** * If the HitResult has a type of 'pixel', this property refers to the color * of the pixel on the {@link Raster} that was hit. */ color: Color | null /** * If the HitResult has a type of 'stroke', 'segment', 'handle-in' or * 'handle-out', this property refers to the segment that was hit or that * is closest to the hitResult.location on the curve. */ segment: Segment /** * Describes the actual coordinates of the segment, handle or bounding box * corner that was hit. */ point: Point } /** * The Item type allows you to access and modify the items in * Paper.js projects. Its functionality is inherited by different project * item types such as {@link Path}, {@link CompoundPath}, {@link Group}, * {@link Layer} and {@link Raster}. They each add a layer of functionality that * is unique to their type, but share the underlying properties and functions * that they inherit from Item. */ class Item { /** * The unique id of the item. */ readonly id: number /** * The class name of the item as a string. */ className: string /** * The name of the item. If the item has a name, it can be accessed by name * through its parent's children list. */ name: string /** * The path style of the item. */ style: Style /** * Specifies whether the item is locked. When set to `true`, item * interactions with the mouse are disabled. */ locked: boolean /** * Specifies whether the item is visible. When set to `false`, the item * won't be drawn. */ visible: boolean /** * The blend mode with which the item is composited onto the canvas. Both * the standard canvas compositing modes, as well as the new CSS blend modes * are supported. If blend-modes cannot be rendered natively, they are * emulated. Be aware that emulation can have an impact on performance. */ blendMode: string /** * The opacity of the item as a value between `0` and `1`. */ opacity: number /** * Specifies whether the item is selected. This will also return `true` for * {@link Group} items if they are partially selected, e.g. groups * containing selected or partially selected paths. * * Paper.js draws the visual outlines of selected items on top of your * project. This can be useful for debugging, as it allows you to see the * construction of paths, position of path curves, individual segment points * and bounding boxes of symbol and raster items. * * @see Project#selectedItems * @see Segment#selected * @see Curve#selected * @see Point#selected */ selected: boolean /** * Specifies whether the item defines a clip mask. This can only be set on * paths and compound paths, and only if the item is already contained * within a clipping group. */ clipMask: boolean /** * A plain javascript object which can be used to store * arbitrary data on the item. */ data: any /** * The item's position within the parent item's coordinate system. By * default, this is the {@link Rectangle#center} of the item's * {@link #bounds} rectangle. */ position: Point /** * The item's pivot point specified in the item coordinate system, defining * the point around which all transformations are hinging. This is also the * reference point for {@link #position}. By default, it is set to `null`, * meaning the {@link Rectangle#center} of the item's {@link #bounds} * rectangle is used as pivot. */ pivot: Point /** * The bounding rectangle of the item excluding stroke width. */ bounds: Rectangle /** * The bounding rectangle of the item including stroke width. */ strokeBounds: Rectangle /** * The bounding rectangle of the item including handles. */ handleBounds: Rectangle /** * The bounding rectangle of the item without any matrix transformations. * * Typical use case would be drawing a frame around the object where you * want to draw something of the same size, position, rotation, and scaling, * like a selection frame. */ internalBounds: Rectangle /** * The current rotation angle of the item, as described by its * {@link #matrix}. * Please note that this only returns meaningful values for items with * {@link #applyMatrix} set to `false`, meaning they do not directly bake * transformations into their content. */ rotation: number /** * The current scale factor of the item, as described by its * {@link #matrix}. * Please note that this only returns meaningful values for items with * {@link #applyMatrix} set to `false`, meaning they do not directly bake * transformations into their content. */ scaling: Point /** * The item's transformation matrix, defining position and dimensions in * relation to its parent item in which it is contained. */ matrix: Matrix /** * The item's global transformation matrix in relation to the global project * coordinate space. Note that the view's transformations resulting from * zooming and panning are not factored in. */ readonly globalMatrix: Matrix /** * The item's global matrix in relation to the view coordinate space. This * means that the view's transformations resulting from zooming and panning * are factored in. */ readonly viewMatrix: Matrix /** * Controls whether the transformations applied to the item (e.g. through * {@link #transform}, {@link #rotate}, * {@link #scale}, etc.) are stored in its {@link #matrix} property, * or whether they are directly applied to its contents or children (passed * on to the segments in {@link Path} items, the children of {@link Group} * items, etc.). */ applyMatrix: boolean /** * The project that this item belongs to. */