DrawLib | plotboilerplate

An interface all drawing libraries must implement to be used with PlotBoilerplate.

The generic type R specifies the return-types for all draw functions. Libraries might want to specify their own draw result; for PlotBoilerplate void or any is fine.

Default implementation is draw.

Type parameters

Hierarchy

DrawLib

Implemented by

Index

Properties

arrow

arrow: (zA: XYCoords, zB: XYCoords, color: string, lineWidth?: number, headLength?: number, strokeOptopns?: StrokeOptions) => R

Draw a line and an arrow at the end (zB) of the given line width the specified (CSS-) color and size.

method: arrow
param: The start point of the arrow-line.
param: The end point of the arrow-line.
param: Any valid CSS color string.
param: (optional) The line width to use; default is 1.
param: (optional) The length of the arrow head (default is 8 units).
param: (optional) Stroke settings to use.
returns
instance
memberof: DrawLib

Type declaration

- (zA: XYCoords, zB: XYCoords, color: string, lineWidth?: number, headLength?: number, strokeOptopns?: StrokeOptions): R
- Parameters
  - zA: XYCoords
  - zB: XYCoords
  - color: string
  - Optional lineWidth: number
  - Optional headLength: number
  - Optional strokeOptopns: StrokeOptions
  Returns R

arrowHead

arrowHead: (zA: XYCoords, zB: XYCoords, color: string, lineWidth?: number, headLength?: number, strokeOptopns?: StrokeOptions) => R

Draw just an arrow head a the end of an imaginary line (zB) of the given line width the specified (CSS-) color and size.

method: arrow
param: The start point of the arrow-line.
param: The end point of the arrow-line.
param: Any valid CSS color string.
param: (optional) The line width to use; default is 1.
param: (optional) The length of the arrow head (default is 8 pixels).
param: (optional) Stroke settings to use.
returns
instance
memberof: DrawLib

Type declaration

- (zA: XYCoords, zB: XYCoords, color: string, lineWidth?: number, headLength?: number, strokeOptopns?: StrokeOptions): R
- Parameters
  - zA: XYCoords
  - zB: XYCoords
  - color: string
  - Optional lineWidth: number
  - Optional headLength: number
  - Optional strokeOptopns: StrokeOptions
  Returns R

beginDrawCycle

beginDrawCycle: (renderTime: number) => R

Called before each draw cycle.

This is required for compatibility with other draw classes in the library (like drawgl).

name: beginDrawCycle
method
param
instance

Type declaration

- (renderTime: number): R
- Parameters
  - renderTime: number
  Returns R

circle

circle: (center: XYCoords, radius: number, color: string, lineWidth?: number, strokeOptions?: StrokeOptions) => R

Draw a circle with the specified (CSS-) color and radius.

Note that if the x- and y- scales are different the result will be an ellipse rather than a circle.

method: circle
param: The center of the circle.
param: The radius of the circle.
param: The CSS color to draw the circle with.
param: (optional) The line width to use; default is 1.
param: (optional) Stroke settings to use.
returns
instance
memberof: DrawLib

Type declaration

- (center: XYCoords, radius: number, color: string, lineWidth?: number, strokeOptions?: StrokeOptions): R
- Parameters
  - center: XYCoords
  - radius: number
  - color: string
  - Optional lineWidth: number
  - Optional strokeOptions: StrokeOptions
  Returns R

circleArc

circleArc: (center: XYCoords, radius: number, startAngle: number, endAngle: number, color: string, lineWidth?: number, strokeOptions?: StrokeOptions) => R

Draw a circular arc (section of a circle) with the given CSS color.

method: circleArc
param: The center of the circle.
param: The radius of the circle.
param: The angle to start at.
param: The angle to end at.
param: The CSS color to draw the circle with.
param: (optional) The line width to use; default is 1.
param: (optional) Stroke settings to use.
returns
instance
memberof: DrawLib

Type declaration

- (center: XYCoords, radius: number, startAngle: number, endAngle: number, color: string, lineWidth?: number, strokeOptions?: StrokeOptions): R
- Parameters
  - center: XYCoords
  - radius: number
  - startAngle: number
  - endAngle: number
  - color: string
  - Optional lineWidth: number
  - Optional strokeOptions: StrokeOptions
  Returns R

circleHandle

circleHandle: (center: XYCoords, size: number, color: string) => R

Draw a circle handle with the given CSS color.

It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped circles.

method: circleHandle
param: The center of the circle.
param: The radius of the circle.
param: The CSS color to draw the circle with.
returns
instance
memberof: DrawLib

Type declaration

- (center: XYCoords, size: number, color: string): R
- Parameters
  - center: XYCoords
  - size: number
  - color: string
  Returns R

clear

clear: (color: string) => R

Due to gl compatibility there is a generic 'clear' function required to avoid accessing the context object itself directly.

This function just fills the whole canvas with a single color.

param: The color to clear with.

Type declaration

- (color: string): R
- Parameters
  - color: string
  Returns R

cross

cross: (center: XYCoords, radius: number, color: string, lineWidth?: number) => R

Draw a cross with diagonal axes with given radius, color and lineWidth at the given position.

Note that the x's radius will not be affected by scaling.

method: crosshair
param: The center of the crosshair.
param: The radius of the crosshair.
param: The CSS color to draw the crosshair with.
param: (optional, default=1.0) The line width to use.
returns
instance
memberof: DrawLib

Type declaration

- (center: XYCoords, radius: number, color: string, lineWidth?: number): R
- Parameters
  - center: XYCoords
  - radius: number
  - color: string
  - Optional lineWidth: number
  Returns R

crosshair

crosshair: (center: XYCoords, radius: number, color: string, lineWidth?: number) => R

Draw a crosshair with given radius and color at the given position.

Note that the crosshair radius will not be affected by scaling.

method: crosshair
param: The center of the crosshair.
param: The radius of the crosshair.
param: The CSS color to draw the crosshair with.
param: (optional, default=0.5) The line width to use.
returns
instance
memberof: DrawLib

Type declaration

- (center: XYCoords, radius: number, color: string, lineWidth?: number): R
- Parameters
  - center: XYCoords
  - radius: number
  - color: string
  - Optional lineWidth: number
  Returns R

cubicBezier

cubicBezier: (startPoint: XYCoords, endPoint: XYCoords, startControlPoint: XYCoords, endControlPoint: XYCoords, color: string, lineWidth?: number, strokeOptopns?: StrokeOptions) => R

Draw the given (cubic) bézier curve.

method: cubicBezier
param: The start point of the cubic Bézier curve
param: The end point the cubic Bézier curve.
param: The start control point the cubic Bézier curve.
param: The end control point the cubic Bézier curve.
param: The CSS color to draw the curve with.
param: (optional) The line width to use.
param: (optional) Stroke settings to use.
returns
instance
memberof: DrawLib

Type declaration

- (startPoint: XYCoords, endPoint: XYCoords, startControlPoint: XYCoords, endControlPoint: XYCoords, color: string, lineWidth?: number, strokeOptopns?: StrokeOptions): R
- Parameters
  - startPoint: XYCoords
  - endPoint: XYCoords
  - startControlPoint: XYCoords
  - endControlPoint: XYCoords
  - color: string
  - Optional lineWidth: number
  - Optional strokeOptopns: StrokeOptions
  Returns R

cubicBezierArrow

cubicBezierArrow: (startPoint: XYCoords, endPoint: XYCoords, startControlPoint: XYCoords, endControlPoint: XYCoords, color: string, lineWidth?: number, headLength?: number, strokeOptopns?: StrokeOptions) => R

Draw a cubic Bézier curve and and an arrow at the end (endControlPoint) of the given line width the specified (CSS-) color and arrow size.

method: cubicBezierArrow
param: The start point of the cubic Bézier curve
param: The end point the cubic Bézier curve.
param: The start control point the cubic Bézier curve.
param: The end control point the cubic Bézier curve.
param: The CSS color to draw the curve with.
param: (optional) The line width to use.
param: (optional) The length of the arrow head (default is 8 units).
param: (optional) Stroke settings to use.
returns
instance
memberof: DrawLib

Type declaration

- (startPoint: XYCoords, endPoint: XYCoords, startControlPoint: XYCoords, endControlPoint: XYCoords, color: string, lineWidth?: number, headLength?: number, strokeOptopns?: StrokeOptions): R
- Parameters
  - startPoint: XYCoords
  - endPoint: XYCoords
  - startControlPoint: XYCoords
  - endControlPoint: XYCoords
  - color: string
  - Optional lineWidth: number
  - Optional headLength: number
  - Optional strokeOptopns: StrokeOptions
  Returns R

cubicBezierPath

cubicBezierPath: (path: Array<XYCoords>, color: string, lineWidth?: number, strokeOptopns?: StrokeOptions) => R

Draw the given (cubic) Bézier path.

The given path must be an array with n*3+1 vertices, where n is the number of curves in the path:

 [ point1, point1_startControl, point2_endControl, point2, point2_startControl, point3_endControl, point3, ... pointN_endControl, pointN ]

method: cubicBezierPath
param: The cubic bezier path as described above.
param: The CSS colot to draw the path with.
param: (optional) The line width to use.
param: (optional) Stroke settings to use.
returns
instance
memberof: DrawLib

Type declaration

- (path: Array<XYCoords>, color: string, lineWidth?: number, strokeOptopns?: StrokeOptions): R
- Parameters
  - path: Array<XYCoords>
  - color: string
  - Optional lineWidth: number
  - Optional strokeOptopns: StrokeOptions
  Returns R

diamondHandle

diamondHandle: (center: XYCoords, size: number, color: string) => R

Draw a diamond handle (square rotated by 45°) with the given CSS color.

It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped diamonds.

method: diamondHandle
param: The center of the diamond.
param: The x/y-size of the diamond.
param: The CSS color to draw the diamond with.
returns
instance
memberof: DrawLib

Type declaration

- (center: XYCoords, size: number, color: string): R
- Parameters
  - center: XYCoords
  - size: number
  - color: string
  Returns R

dot

dot: (p: XYCoords, color: string) => R

Draw a 1x1 dot with the specified (CSS-) color.

method: dot
param: The position to draw the dot at.
param: The CSS color to draw the dot with.
returns
instance
memberof: DrawLib

Type declaration

- (p: XYCoords, color: string): R
- Parameters
  - p: XYCoords
  - color: string
  Returns R

ellipse

ellipse: (center: XYCoords, radiusX: number, radiusY: number, color: string, lineWidth?: number, rotation?: number, strokeOptions?: StrokeOptions) => R

Draw an ellipse with the specified (CSS-) color and thw two radii.

method: ellipse
param: The center of the ellipse.
param: The radius of the ellipse.
param: The radius of the ellipse.
param: The CSS color to draw the ellipse with.
param: (optional) The line width to use; default is 1.
param: (optional, default=0) The rotation of the ellipse.
param: (optional) Stroke settings to use.
returns
instance
memberof: DrawLib

Type declaration

- (center: XYCoords, radiusX: number, radiusY: number, color: string, lineWidth?: number, rotation?: number, strokeOptions?: StrokeOptions): R
- Parameters
  - center: XYCoords
  - radiusX: number
  - radiusY: number
  - color: string
  - Optional lineWidth: number
  - Optional rotation: number
  - Optional strokeOptions: StrokeOptions
  Returns R

endDrawCycle

endDrawCycle: (renderTime: number) => R

Called after each draw cycle.

This is required for compatibility with other draw classes in the library (like drawgl).

name: endDrawCycle
method
param
instance

Type declaration

- (renderTime: number): R
- Parameters
  - renderTime: number
  Returns R

fillShapes

fillShapes: boolean

grid

grid: (center: XYCoords, width: number, height: number, sizeX: number, sizeY: number, color: string) => R

Draw a grid of horizontal and vertical lines with the given (CSS-) color.

method: grid
param: The center of the grid.
param: The total width of the grid (width/2 each to the left and to the right).
param: The total height of the grid (height/2 each to the top and to the bottom).
param: The horizontal grid size.
param: The vertical grid size.
param: The CSS color to draw the grid with.
returns
instance
memberof: DrawLib

Type declaration

- (center: XYCoords, width: number, height: number, sizeX: number, sizeY: number, color: string): R
- Parameters
  - center: XYCoords
  - width: number
  - height: number
  - sizeX: number
  - sizeY: number
  - color: string
  Returns R

handle

handle: (startPoint: XYCoords, endPoint: XYCoords) => R

Draw the given handle and handle point (used to draw interactive Bézier curves).

The colors for this are fixed and cannot be specified.

method: handle
param: The start of the handle.
param: The end point of the handle.
returns
instance
memberof: DrawLib

Type declaration

- (startPoint: XYCoords, endPoint: XYCoords): R
- Parameters
  - startPoint: XYCoords
  - endPoint: XYCoords
  Returns R

handleLine

handleLine: (startPoint: XYCoords, endPoint: XYCoords) => R

Draw a handle line (with a light grey).

method: handleLine
param: The start point to draw the handle at.
param: The end point to draw the handle at.
returns
instance
memberof: DrawLib

Type declaration

- (startPoint: XYCoords, endPoint: XYCoords): R
- Parameters
  - startPoint: XYCoords
  - endPoint: XYCoords
  Returns R

image

image: (image: HTMLImageElement, position: XYCoords, size: XYCoords, alpha?: number) => R

Draw an image at the given position with the given size.

Note: SVG images may have resizing issues at the moment.Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.

method: image
param: The position to draw the the upper left corner at.
param: The x/y-size to draw the image with.
param: (optional, default=0.0) The transparency (1.0=opaque, 0.0=transparent).
returns
instance
memberof: DrawLib

Type declaration

- (image: HTMLImageElement, position: XYCoords, size: XYCoords, alpha?: number): R
- The image object to draw.
  
  Parameters
  - image: HTMLImageElement
  - position: XYCoords
  - size: XYCoords
  - Optional alpha: number
  Returns R

label

label: (text: string, x: number, y: number, rotation?: number, color?: string) => R

Draw a non-scaling text label at the given absolute position.

method: label
param: The text to draw.
param: The x-position to draw the text at.
param: The y-position to draw the text at.
param: The (aoptional) rotation in radians.
param: The color to use (default is black).
returns
instance
memberof: DrawLib

Type declaration

- (text: string, x: number, y: number, rotation?: number, color?: string): R
- Parameters
  - text: string
  - x: number
  - y: number
  - Optional rotation: number
  - Optional color: string
  Returns R

line

line: (zA: XYCoords, zB: XYCoords, color: string, lineWidth?: number, strokeOptopns?: StrokeOptions) => R

Draw the line between the given two points with the specified (CSS-) color.

method: line
param: The start point of the line.
param: The end point of the line.
param: Any valid CSS color string.
param: (optional) The line's width.
param: (optional) Stroke settings to use.
returns
instance
memberof: DrawLib

Type declaration

- (zA: XYCoords, zB: XYCoords, color: string, lineWidth?: number, strokeOptopns?: StrokeOptions): R
- Parameters
  - zA: XYCoords
  - zB: XYCoords
  - color: string
  - Optional lineWidth: number
  - Optional strokeOptopns: StrokeOptions
  Returns R

offset

offset: Vertex

path

path: (pathData: SVGPathParams, color?: string, lineWidth?: number, options?: { inplace?: boolean } & StrokeOptions) => R

Draw an SVG-like path given by the specified path data.

method: path
param: An array of path commands and params.
param: (optional) The color to draw this path with (default is null).
param: (optional) the line width to use (default is 1).
param: (optional) If set to true then path transforamtions (scale and translate) will be done in-place in the array. This can boost the performance.
param: See StrokeOptions.
param: See StrokeOptions.
instance
memberof: DrawLib
returns: An instance representing the drawn path.

Type declaration

- (pathData: SVGPathParams, color?: string, lineWidth?: number, options?: { inplace?: boolean } & StrokeOptions): R
- Parameters
  - pathData: SVGPathParams
  - Optional color: string
  - Optional lineWidth: number
  - Optional options: { inplace?: boolean } & StrokeOptions
  Returns R

point

point: (p: XYCoords, color: string) => R

Draw the given point with the specified (CSS-) color and radius 3.

method: point
param: The position to draw the point at.
param: The CSS color to draw the point with.
returns
instance
memberof: DrawLib

Type declaration

- (p: XYCoords, color: string): R
- Parameters
  - p: XYCoords
  - color: string
  Returns R

polygon

polygon: (polygon: Polygon, color: string, lineWidth?: number, strokeOptions?: StrokeOptions) => R

Draw a polygon.

method: polygon
param: The CSS color to draw the polygon with.
param: The line width to draw this polygon with.
param: (optional) Stroke settings to use.
returns
instance
memberof: DrawLib

Type declaration

- (polygon: Polygon, color: string, lineWidth?: number, strokeOptions?: StrokeOptions): R
- The polygon to draw.
  
  Parameters
  - polygon: Polygon
  - color: string
  - Optional lineWidth: number
  - Optional strokeOptions: StrokeOptions
  Returns R

polyline

polyline: (vertices: Array<XYCoords>, isOpen: boolean, color: string, lineWidth?: number, strokeOptions?: StrokeOptions) => R

Draw a polygon line (alternative function to the polygon).

method: polyline
param: The polygon vertices to draw.
param: If true the polyline will not be closed at its end.
param: The CSS color to draw the polygon with.
param: (optional) The line width to use; default is 1.
param: (optional) Stroke settings to use.
returns
instance
memberof: DrawLib

Type declaration

- (vertices: Array<XYCoords>, isOpen: boolean, color: string, lineWidth?: number, strokeOptions?: StrokeOptions): R
- Parameters
  - vertices: Array<XYCoords>
  - isOpen: boolean
  - color: string
  - Optional lineWidth: number
  - Optional strokeOptions: StrokeOptions
  Returns R

raster

raster: (center: XYCoords, width: number, height: number, sizeX: number, sizeY: number, color: string) => R

Draw a raster of crosshairs in the given grid.

This works analogue to the grid() function

method: raster
param: The center of the raster.
param: The total width of the raster (width/2 each to the left and to the right).
param: The total height of the raster (height/2 each to the top and to the bottom).
param: The horizontal raster size.
param: The vertical raster size.
param: The CSS color to draw the raster with.
returns
instance
memberof: DrawLib

Type declaration

- (center: XYCoords, width: number, height: number, sizeX: number, sizeY: number, color: string): R
- Parameters
  - center: XYCoords
  - width: number
  - height: number
  - sizeX: number
  - sizeY: number
  - color: string
  Returns R

rect

rect: (upperLeft: XYCoords, width: number, height: number, color: string, lineWidth?: number, strokeOptions?: StrokeOptions) => R

Draw a rectangle at the given left upper corner, with, height; and with the specified line width and (CSS-) color.

method: rect
param: The center of the rectangle.
param: The width of the rectangle.
param: The height of the rectangle.
param: The CSS color to draw the rectangle with.
param: (optional) The line width to use; default is 1.
param: (optional) Stroke settings to use.
returns
instance
memberof: DrawLib

Type declaration

- (upperLeft: XYCoords, width: number, height: number, color: string, lineWidth?: number, strokeOptions?: StrokeOptions): R
- Parameters
  - upperLeft: XYCoords
  - width: number
  - height: number
  - color: string
  - Optional lineWidth: number
  - Optional strokeOptions: StrokeOptions
  Returns R

scale

scale: Vertex

setConfiguration

setConfiguration: (configuration: DrawLibConfiguration) => void

Set the current drawlib configuration.

name: setConfiguration
method
param: The new configuration settings to use for the next render methods.

Type declaration

- (configuration: DrawLibConfiguration): void
- Parameters
  - configuration: DrawLibConfiguration
  Returns void

setCurrentClassName

setCurrentClassName: (className: string | null) => void

This method shouled be called each time the currently drawn Drawable changes. Determine the class name for further usage here.

name: setCurrentClassName
method
param: A class name for further custom use cases.

Type declaration

- (className: string | null): void
- Parameters
  - className: string | null
  Returns void

setCurrentId

setCurrentId: (uid: UID | null) => void

This method shouled be called each time the currently drawn Drawable changes. It is used by some libraries for identifying elemente on re-renders.

name: setCurrentId
method
param: A UID identifying the currently drawn element(s), or null to clear.

Type declaration

- (uid: UID | null): void
- Parameters
  - uid: UID | null
  Returns void

square

square: (center: XYCoords, size: number, color: string, lineWidth?: number, strokeOptions?: StrokeOptions) => R

Draw square at the given center, size and with the specified (CSS-) color.

Note that if the x-scale and the y-scale are different the result will be a rectangle rather than a square.

method: square
param: The center of the square.
param: The size of the square.
param: The CSS color to draw the square with.
param: (optional) The line width to use; default is 1.
param: (optional) Stroke settings to use.
returns
instance
memberof: DrawLib

Type declaration

- (center: XYCoords, size: number, color: string, lineWidth?: number, strokeOptions?: StrokeOptions): R
- Parameters
  - center: XYCoords
  - size: number
  - color: string
  - Optional lineWidth: number
  - Optional strokeOptions: StrokeOptions
  Returns R

squareHandle

squareHandle: (center: XYCoords, size: number, color: string) => R

Draw a square handle with the given CSS color.

It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped squares.

method: squareHandle
param: The center of the square.
param: The x/y-size of the square.
param: The CSS color to draw the square with.
returns
instance
memberof: DrawLib

Type declaration

- (center: XYCoords, size: number, color: string): R
- Parameters
  - center: XYCoords
  - size: number
  - color: string
  Returns R

text

text: (text: string, x: number, y: number, options?: FontOptions) => R

Draw a text at the given relative position.

method: text
param: The x-position to draw the text at.
param: The y-position to draw the text at.
param: The Color to use.
param: The font family to use.
param: The font size (in pixels) to use.
param: The font style to use.
param: The font weight to use.
param: The line height (in pixels) to use.
param: The (optional) rotation in radians.
param: The text align to use. According to the specifiactions (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign) valid values are "left" || "right" || "center" || "start" || "end".
returns
instance
memberof: DrawLib

Type declaration

- (text: string, x: number, y: number, options?: FontOptions): R
- The text to draw.
  
  Parameters
  - text: string
  - x: number
  - y: number
  - Optional options: FontOptions
  Returns R

texturedPoly

texturedPoly: (textureImage: HTMLImageElement, textureSize: Bounds, polygon: Polygon, polygonPosition: XYCoords, rotation: number) => R

method: texturedPoly
param: The image object to draw.
param: The texture size to use; these are the original bounds to map the polygon vertices to.
param: The polygon to use as clip path.
param: The polygon's position (relative), measured at the bounding box's center.
param: The rotation to use for the polygon (and for the texture).
returns
instance
memberof: DrawLib

Type declaration

- (textureImage: HTMLImageElement, textureSize: Bounds, polygon: Polygon, polygonPosition: XYCoords, rotation: number): R
- Parameters
  - textureImage: HTMLImageElement
  - textureSize: Bounds
  - polygon: Polygon
  - polygonPosition: XYCoords
  - rotation: number
  Returns R

Generated using TypeDoc

Type parameters

R

Hierarchy

Implemented by

Index

Properties

Properties

arrow

Type declaration

Parameters

zA: XYCoords

zB: XYCoords

color: string

Optional lineWidth: number

Optional headLength: number

Optional strokeOptopns: StrokeOptions

Returns R

arrowHead

Type declaration

Parameters

zA: XYCoords

zB: XYCoords

color: string

Optional lineWidth: number

Optional headLength: number

Optional strokeOptopns: StrokeOptions

Returns R

beginDrawCycle

Type declaration

Parameters

renderTime: number

Returns R

circle

Type declaration

Parameters

center: XYCoords

radius: number

color: string

Optional lineWidth: number

Optional strokeOptions: StrokeOptions

Returns R

circleArc

Type declaration

Parameters

center: XYCoords

radius: number

startAngle: number

endAngle: number

color: string

Optional lineWidth: number

Optional strokeOptions: StrokeOptions

Returns R

circleHandle

Type declaration

Parameters

center: XYCoords

size: number

color: string

Returns R

clear

Type declaration

Parameters

color: string

Returns R

cross

Type declaration

Parameters

center: XYCoords

radius: number

color: string

Optional lineWidth: number

Returns R

crosshair

Type declaration

Parameters

center: XYCoords

radius: number

color: string

Optional lineWidth: number

Returns R