plotboilerplate
Version:
A simple javascript plotting boilerplate for 2d stuff.
231 lines (230 loc) • 10.2 kB
TypeScript
/**
* Implementation of elliptic sectors.
* Note that sectors are constructed in clockwise direction.
*
* @author Ikaros Kappler
* @date 2021-02-26
* @modified 2022-02-02 Added the `destroy` method.
* @modified 2022-11-01 Tweaked the `endpointToCenterParameters` function to handle negative values, too, without errors.
* @modified 2025-04-01 Adapting a the `toCubicBezier` calculation to match an underlying change in the vertAt and tangentAt calculation of ellipses (was required to hamonize both methods with circles).
* @modified 2025-04-02 Adding `VEllipseSector.containsAngle` method.
* @modified 2025-04-02 Adding `VEllipseSector.lineIntersections` and `VEllipseSector.lineIntersectionTangents` and implementing `Intersectable`.
* @modified 2025-04-07 Adding value wrapping (0 to TWO_PI) to the `VEllipseSector.containsAngle` method.
* @modified 2025-04-09 Adding the `VEllipseSector.move` method.
* @modified 2025-04-19 Added the `VEllipseSector.getStartPoint` and `getEndPoint` methods.
* @modified 2025-04-23 Added the `VEllipseSector.getBounds` method.
* @version 1.2.0
*/
import { Bounds } from "./Bounds";
import { CubicBezierCurve } from "./CubicBezierCurve";
import { SVGPathParams, UID, XYCoords } from "./interfaces";
import { Vector } from "./Vector";
import { VEllipse } from "./VEllipse";
import { Vertex } from "./Vertex";
import { VertTuple } from "./VertTuple";
/**
* @classdesc A class for elliptic sectors.
*
* @requires Line
* @requires Vector
* @requires VertTuple
* @requires Vertex
* @requires SVGSerializale
* @requires UID
* @requires UIDGenerator
**/
export declare class VEllipseSector {
/**
* Required to generate proper CSS classes and other class related IDs.
**/
readonly className: string;
/**
* The UID of this drawable object.
*
* @member {UID}
* @memberof VEllipseSector
* @instance
* @readonly
*/
readonly uid: UID;
/**
* @member {VEllipse}
* @memberof VEllipseSector
* @instance
*/
ellipse: VEllipse;
/**
* @member {number}
* @memberof VEllipseSector
* @instance
*/
startAngle: number;
/**
* @member {number}
* @memberof VEllipseSector
* @instance
*/
endAngle: number;
/**
* @member isDestroyed
* @memberof VEllipseSector
* @type {boolean}
* @instance
*/
isDestroyed: boolean;
/**
* Create a new elliptic sector from the given ellipse and two angles.
*
* Note that the direction from start to end goes clockwise, and that start and end angle
* will be wrapped to [0,PI*2).
*
* @constructor
* @name VEllipseSector
* @param {VEllipse} - The underlying ellipse to use.
* @param {number} startAngle - The start angle of the sector.
* @param {numner} endAngle - The end angle of the sector.
*/
constructor(ellipse: VEllipse, startAngle: number, endAngle: number);
/**
* Move the ellipse sector by the given amount.
*
* @method move
* @param {XYCoords} amount - The amount to move.
* @instance
* @memberof VEllipseSector
* @return {VEllipseSector} this for chaining
**/
move(amount: XYCoords): VEllipseSector;
/**
* Checks wether the given angle (must be inside 0 and PI*2) is contained inside this sector.
*
* @param {number} angle - The numeric angle to check.
* @method containsAngle
* @instance
* @memberof VEllipseSectpr
* @return {boolean} True if (and only if) this sector contains the given angle.
*/
containsAngle(angle: number): boolean;
/**
* Get the sectors starting point (on the underlying ellipse, located at the start angle).
*
* @method getStartPoint
* @instance
* @memberof VEllipseSector
* @return {Vertex} The sector's stating point.
*/
getStartPoint(): Vertex;
/**
* Get the sectors ending point (on the underlying ellipse, located at the end angle).
*
* @method getEndPoint
* @instance
* @memberof VEllipseSector
* @return {Vertex} The sector's ending point.
*/
getEndPoint(): Vertex;
/**
* Get the bounds of this elliptic sector.
*
* The bounds are approximated by the underlying segment buffer; the more segment there are,
* the more accurate will be the returned bounds.
*
* @method getBounds
* @instance
* @memberof VEllipse
* @return {Bounds} The bounds of this elliptic sector.
**/
getBounds(): Bounds;
/**
* Get the line intersections as vectors with this ellipse.
*
* @method lineIntersections
* @instance
* @memberof VEllipseSectpr
* @param {VertTuple<Vector>} ray - The line/ray to intersect this ellipse with.
* @param {boolean} inVectorBoundsOnly - (default=false) Set to true if only intersections within the vector bounds are of interest.
* @returns
*/
lineIntersections(ray: VertTuple<Vector>, inVectorBoundsOnly?: boolean): Array<Vertex>;
/**
* Get all line intersections of this polygon and their tangents along the shape.
*
* This method returns all intersection tangents (as vectors) with this shape. The returned array of vectors is in no specific order.
*
* @method lineIntersections
* @memberof VEllipseSectpr
* @param line
* @param lineIntersectionTangents
* @returns
*/
lineIntersectionTangents(line: VertTuple<any>, inVectorBoundsOnly?: boolean): Array<Vector>;
/**
* Convert this elliptic sector into cubic Bézier curves.
*
* @param {number=3} quarterSegmentCount - The number of segments per base elliptic quarter (default is 3, min is 1).
* @param {number=0.666666} threshold - The Bézier threshold (default value 0.666666 approximates the ellipse with best results
* but you might wish to use other values)
* @return {Array<CubicBezierCurve>} An array of cubic Bézier curves representing the elliptic sector.
*/
toCubicBezier(quarterSegmentCount?: number, threshold?: number): Array<CubicBezierCurve>;
/**
* This function should invalidate any installed listeners and invalidate this object.
* After calling this function the object might not hold valid data any more and
* should not be used.
*/
destroy(): void;
static ellipseSectorUtils: {
/**
* Helper function to convert an elliptic section to SVG arc params (for the `d` attribute).
* Inspiration found at:
* https://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle
*
* @param {boolean} options.moveToStart - If false (default=true) the initial 'Move' command will not be used.
* @return [ 'A', radiusH, radiusV, rotation, largeArcFlag=1|0, sweepFlag=0, endx, endy ]
*/
describeSVGArc: (x: number, y: number, radiusH: number, radiusV: number, startAngle: number, endAngle: number, rotation?: number, options?: {
moveToStart: boolean;
}) => SVGPathParams;
/**
* Helper function to find second-kind elliptic angles, so that the euclidean distance along the the
* elliptic sector is the same for all.
*
* Note that this is based on the full ellipse calculuation and start and end will be cropped; so the
* distance from the start angle to the first angle and/or the distance from the last angle to
* the end angle may be different to the others.
*
* Furthermore the computation is only possible on un-rotated ellipses; if your source ellipse has
* a rotation on the plane please 'rotate' the result angles afterwards to find matching angles.
*
* Returned angles are normalized to the interval `[ 0, PI*2 ]`.
*
* @param {number} radiusH - The first (horizonal) radius of the ellipse.
* @param {number} radiusV - The second (vertical) radius of the ellipse.
* @param {number} startAngle - The opening angle of your elliptic sector (please use normalized angles).
* @param {number} endAngle - The closing angle of your elliptic sector (please use normalized angles).
* @param {number} fullEllipsePointCount - The number of base segments to use from the source ellipse (12 or 16 are good numbers).
* @return {Array<number>} An array of n angles inside startAngle and endAngle (where n <= fullEllipsePointCount).
*/
equidistantVertAngles: (radiusH: number, radiusV: number, startAngle: number, endAngle: number, fullEllipsePointCount: number) => Array<number>;
findClosestToStartAngle: (startAngle: number, endAngle: number, ellipseAngles: Array<number>) => number;
normalizeAngle: (angle: number) => number;
/**
* Convert the elliptic arc from endpoint parameters to center parameters as described
* in the w3c svg arc implementation note.
*
* https://www.w3.org/TR/SVG/implnote.html#ArcConversionEndpointToCenter
*
* @param {number} x1 - The x component of the start point (end of last SVG command).
* @param {number} y1 - The y component of the start point (end of last SVG command).
* @param {number} rx - The first (horizontal) radius of the ellipse.
* @param {number} ry - The second (vertical) radius of the ellipse.
* @param {number} phi - The ellipse's rotational angle (angle of axis rotation) in radians (not in degrees as the SVG command uses!)
* @param {boolean} fa - The large-arc-flag (boolean, not 0 or 1).
* @param {boolean} fs - The sweep-flag (boolean, not 0 or 1).
* @param {number} x2 - The x component of the end point (end of last SVG command).
* @param {number} y2 - The y component of the end point (end of last SVG command).
* @returns
*/
endpointToCenterParameters(x1: number, y1: number, rx: number, ry: number, phi: number, fa: boolean, fs: boolean, x2: number, y2: number): VEllipseSector;
};
}