UNPKG

pencil.js

Version:

Nice modular interactive 2D drawing library.

117 lines (116 loc) 4.51 kB
/** * @module Path */ /** * Path class * <br><img src="./media/examples/path.png" alt="path demo"/> * @class * @extends {module:Component} */ export default class Path { /** * @inheritDoc * @param {Object} definition - Path definition * @return {Path} */ static from(definition: any): Path; /** * Draw a line to a position * @param {PositionDefinition} position - Any position * @return {Instruction} */ static lineTo(position: PositionDefinition): Instruction; /** * Move the pencil without drawing * @param {PositionDefinition} position - Any position * @return {Instruction} */ static moveTo(position: PositionDefinition): Instruction; /** * Draw an quarter circle arc to a position * @param {PositionDefinition} position - Any position * @param {Boolean} [clockwise=true] - Should the arc be clockwise or not * @return {Instruction} */ static quarterTo(position: PositionDefinition, clockwise?: boolean): Instruction; /** * Draw an quarter circle arc to a position * @param {PositionDefinition} position - Any position * @param {Boolean} [clockwise=true] - Should the arc be clockwise or not * @return {Instruction} */ static halfTo(position: PositionDefinition, clockwise?: boolean): Instruction; /** * Try to approximate an arc between two points * @param {PositionDefinition} position - Any position * @param {Number} angle - Arc angle in ratio of a full circle (should be less than 0.5) * @param {Number} magicRatio - Control points "openness" ratio * @param {Boolean} [clockwise=true] - Should the arc be clockwise or not * @return {Instruction} */ static arcTo(position: PositionDefinition, angle: number, magicRatio: number, clockwise?: boolean): Instruction; /** * Draw a quadratic curve to a position * @param {PositionDefinition} position - Any position * @param {PositionDefinition} controlPoint - Point that control the curve * @return {Instruction} */ static quadTo(position: PositionDefinition, controlPoint: PositionDefinition): Instruction; /** * Draw a bezier curve to a position * @param {PositionDefinition} position - Any position * @param {PositionDefinition} firstControlPoint - First point to control the curve * @param {PositionDefinition} secondControlPoint - Second point to control the curve * @return {Instruction} */ static bezierTo(position: PositionDefinition, firstControlPoint: PositionDefinition, secondControlPoint: PositionDefinition): Instruction; /** * * @param {Array<PositionDefinition>} points - Any set of positions * @param {Number} [tension] - Ratio of tension * @return {Instruction} */ static splineThrough(points: Array<PositionDefinition>, tension?: number): Instruction; /** * * @param {PositionDefinition} position - Any position * @param {Number} nbWaves - Number of waves to draw * @return {Instruction} */ static waveTo(position: PositionDefinition, nbWaves: number): Instruction; /** * * @param {PositionDefinition} position - Any position * @param {Number} nbSins - Number of sinusoid to draw * @param {Number} sinsHeight - Height of the sinusoid * @return {Instruction} */ static sinTo(position: PositionDefinition, nbSins: number, sinsHeight: number): Instruction; /** * Path constructor * @param {PositionDefinition} positionDefinition - Starting position of the Path * @param {Array<Instruction>|String} instructions - Set of instructions to follow to draw it * @param {Boolean} [isClosed=true] - Should the path close itself (add a line to the starting position) * @param {ComponentOptions|LineOptions} [options] - Drawing options */ constructor(positionDefinition: PositionDefinition, instructions: Array<Instruction> | string, isClosed?: boolean, options?: ComponentOptions | LineOptions); options: any; instructions: string | Instruction[]; isClosed: boolean; closing: Instruction; /** * Draw the path * @param {Path2D} path - Current drawing path * @return {Path} Itself */ trace(path: Path2D): Path; /** * @inheritDoc */ isHover(positionDefinition: any, ctx: any): any; /** * @inheritDoc */ toJSON(): any; } import Instruction from "./instruction.js";