Options
All
  • Public
  • Public/Protected
  • All
Menu

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

  • R

Hierarchy

  • DrawLib

Implemented by

Index

Properties

arrow

arrow: (zA: Vertex, zB: Vertex, color: string, lineWidth?: number) => R

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

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.

returns
instance
memberof

DrawLib

Type declaration

    • (zA: Vertex, zB: Vertex, color: string, lineWidth?: number): R
    • Parameters

      • zA: Vertex
      • zB: Vertex
      • color: string
      • Optional lineWidth: number

      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: Vertex, radius: number, color: string, lineWidth?: number) => 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.

returns
instance
memberof

DrawLib

Type declaration

    • (center: Vertex, radius: number, color: string, lineWidth?: number): R
    • Parameters

      • center: Vertex
      • radius: number
      • color: string
      • Optional lineWidth: number

      Returns R

circleArc

circleArc: (center: Vertex, radius: number, startAngle: number, endAngle: number, color: string, lineWidth?: number) => 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.

returns
instance
memberof

DrawLib

Type declaration

    • (center: Vertex, radius: number, startAngle: number, endAngle: number, color: string, lineWidth?: number): R
    • Parameters

      • center: Vertex
      • radius: number
      • startAngle: number
      • endAngle: number
      • color: string
      • Optional lineWidth: number

      Returns R

circleHandle

circleHandle: (center: Vertex, 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: Vertex, size: number, color: string): R
    • Parameters

      • center: Vertex
      • 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: Vertex, endPoint: Vertex, startControlPoint: Vertex, endControlPoint: Vertex, color: string, lineWidth?: number) => 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.

returns
instance
memberof

DrawLib

Type declaration

    • (startPoint: Vertex, endPoint: Vertex, startControlPoint: Vertex, endControlPoint: Vertex, color: string, lineWidth?: number): R
    • Parameters

      • startPoint: Vertex
      • endPoint: Vertex
      • startControlPoint: Vertex
      • endControlPoint: Vertex
      • color: string
      • Optional lineWidth: number

      Returns R

cubicBezierPath

cubicBezierPath: (path: Array<Vertex>, color: string, lineWidth?: number) => 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.

returns
instance
memberof

DrawLib

Type declaration

    • (path: Array<Vertex>, color: string, lineWidth?: number): R
    • Parameters

      • path: Array<Vertex>
      • color: string
      • Optional lineWidth: number

      Returns R

diamondHandle

diamondHandle: (center: Vertex, 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: Vertex, size: number, color: string): R
    • Parameters

      • center: Vertex
      • size: number
      • color: string

      Returns R

dot

dot: (p: Vertex, 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: Vertex, color: string): R
    • Parameters

      Returns R

ellipse

ellipse: (center: Vertex, radiusX: number, radiusY: number, color: string, lineWidth?: number, rotation?: number) => 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.

returns
instance
memberof

DrawLib

Type declaration

    • (center: Vertex, radiusX: number, radiusY: number, color: string, lineWidth?: number, rotation?: number): R
    • Parameters

      • center: Vertex
      • radiusX: number
      • radiusY: number
      • color: string
      • Optional lineWidth: number
      • Optional rotation: number

      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: Vertex, 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: Vertex, width: number, height: number, sizeX: number, sizeY: number, color: string): R
    • Parameters

      • center: Vertex
      • width: number
      • height: number
      • sizeX: number
      • sizeY: number
      • color: string

      Returns R

handle

handle: (startPoint: Vertex, endPoint: Vertex) => 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

handleLine

handleLine: (startPoint: Vertex, endPoint: Vertex) => 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

image

image: (image: HTMLImageElement, position: Vertex, size: Vertex, 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: Vertex, size: Vertex, alpha?: number): R
    • The image object to draw.

      Parameters

      • image: HTMLImageElement
      • position: Vertex
      • size: Vertex
      • 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: Vertex, zB: Vertex, color: string, lineWidth?: number) => 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.

returns
instance
memberof

DrawLib

Type declaration

    • (zA: Vertex, zB: Vertex, color: string, lineWidth?: number): R
    • Parameters

      • zA: Vertex
      • zB: Vertex
      • color: string
      • Optional lineWidth: number

      Returns R

offset

offset: Vertex

path

path: (pathData: SVGPathParams, color?: string, lineWidth?: number, options?: { inplace?: boolean }) => 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.

instance
memberof

DrawLib

returns

An instance representing the drawn path.

Type declaration

    • (pathData: SVGPathParams, color?: string, lineWidth?: number, options?: { inplace?: boolean }): R
    • Parameters

      • pathData: SVGPathParams
      • Optional color: string
      • Optional lineWidth: number
      • Optional options: { inplace?: boolean }
        • Optional inplace?: boolean

      Returns R

point

point: (p: Vertex, 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: Vertex, color: string): R
    • Parameters

      Returns R

polygon

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

Draw a polygon.

method

polygon

param

The CSS color to draw the polygon with.

returns
instance
memberof

DrawLib

Type declaration

    • (polygon: Polygon, color: string, lineWidth?: number): R
    • The polygon to draw.

      Parameters

      • polygon: Polygon
      • color: string
      • Optional lineWidth: number

      Returns R

polyline

polyline: (vertices: Array<Vertex>, isOpen: boolean, color: string, lineWidth?: number) => 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.

returns
instance
memberof

DrawLib

Type declaration

    • (vertices: Array<Vertex>, isOpen: boolean, color: string, lineWidth?: number): R
    • Parameters

      • vertices: Array<Vertex>
      • isOpen: boolean
      • color: string
      • Optional lineWidth: number

      Returns R

raster

raster: (center: Vertex, 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: Vertex, width: number, height: number, sizeX: number, sizeY: number, color: string): R
    • Parameters

      • center: Vertex
      • width: number
      • height: number
      • sizeX: number
      • sizeY: number
      • color: string

      Returns R

rect

rect: (upperLeft: XYCoords, width: number, height: number, color: string, lineWidth?: number) => 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.

returns
instance
memberof

DrawLib

Type declaration

    • (upperLeft: XYCoords, width: number, height: number, color: string, lineWidth?: number): R
    • Parameters

      • upperLeft: XYCoords
      • width: number
      • height: number
      • color: string
      • Optional lineWidth: number

      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

setCurrentClassName

setCurrentClassName: (className: string | undefined) => 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 | undefined): void
    • Parameters

      • className: string | undefined

      Returns void

setCurrentId

setCurrentId: (uid: UID | undefined) => 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 | undefined): void
    • Parameters

      • uid: UID | undefined

      Returns void

square

square: (center: XYCoords, size: number, color: string, lineWidth?: number) => 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.

returns
instance
memberof

DrawLib

Type declaration

    • (center: XYCoords, size: number, color: string, lineWidth?: number): R
    • Parameters

      • center: XYCoords
      • size: number
      • color: string
      • Optional lineWidth: number

      Returns R

squareHandle

squareHandle: (center: Vertex, 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: Vertex, size: number, color: string): R
    • Parameters

      • center: Vertex
      • 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: Vertex, rotation: 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

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: Vertex, rotation: number): R
    • Parameters

      • textureImage: HTMLImageElement
      • textureSize: Bounds
      • polygon: Polygon
      • polygonPosition: Vertex
      • rotation: number

      Returns R

Legend

  • Constructor
  • Property
  • Method
  • Property
  • Method
  • Inherited property
  • Inherited method
  • Private property
  • Private method
  • Static property
  • Static method

Generated using TypeDoc