Interface DrawLib<R>

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.

interface DrawLib<R> {
    arrow: ((zA, zB, color, lineWidth?, headLength?, strokeOptopns?) => R);
    arrowHead: ((zA, zB, color, lineWidth?, headLength?, strokeOptopns?) => R);
    beginDrawCycle: ((renderTime) => R);
    circle: ((center, radius, color, lineWidth?, strokeOptions?) => R);
    circleArc: ((center, radius, startAngle, endAngle, color, lineWidth?, strokeOptions?) => R);
    circleHandle: ((center, size, color) => R);
    clear: ((color) => R);
    cross: ((center, radius, color, lineWidth?) => R);
    crosshair: ((center, radius, color, lineWidth?) => R);
    cubicBezier: ((startPoint, endPoint, startControlPoint, endControlPoint, color, lineWidth?, strokeOptopns?) => R);
    cubicBezierArrow: ((startPoint, endPoint, startControlPoint, endControlPoint, color, lineWidth?, headLength?, strokeOptopns?) => R);
    cubicBezierPath: ((path, color, lineWidth?, strokeOptopns?) => R);
    diamondHandle: ((center, size, color) => R);
    dot: ((p, color) => R);
    ellipse: ((center, radiusX, radiusY, color, lineWidth?, rotation?, strokeOptions?) => R);
    endDrawCycle: ((renderTime) => R);
    fillShapes: boolean;
    grid: ((center, width, height, sizeX, sizeY, color) => R);
    handle: ((startPoint, endPoint) => R);
    handleLine: ((startPoint, endPoint) => R);
    image: ((image, position, size, alpha?) => R);
    label: ((text, x, y, rotation?, color?) => R);
    line: ((zA, zB, color, lineWidth?, strokeOptopns?) => R);
    offset: Vertex;
    path: ((pathData, color?, lineWidth?, options?) => R);
    point: ((p, color) => R);
    polygon: ((polygon, color, lineWidth?, strokeOptions?) => R);
    polyline: ((vertices, isOpen, color, lineWidth?, strokeOptions?) => R);
    raster: ((center, width, height, sizeX, sizeY, color) => R);
    rect: ((upperLeft, width, height, color, lineWidth?, strokeOptions?) => R);
    scale: Vertex;
    setConfiguration: ((configuration) => void);
    setCurrentClassName: ((className) => void);
    setCurrentId: ((uid) => void);
    square: ((center, size, color, lineWidth?, strokeOptions?) => R);
    squareHandle: ((center, size, color) => R);
    text: ((text, x, y, options?) => R);
    texturedPoly: ((textureImage, textureSize, polygon, polygonPosition, rotation) => R);
}

Type Parameters

  • R

Implemented by

Properties

arrow arrowHead beginDrawCycle circle circleArc circleHandle clear cross crosshair cubicBezier cubicBezierArrow cubicBezierPath diamondHandle dot ellipse endDrawCycle fillShapes grid handle handleLine image label line offset path point polygon polyline raster rect scale setConfiguration setCurrentClassName setCurrentId square squareHandle text texturedPoly

Properties

arrow

arrow: ((zA, zB, color, lineWidth?, headLength?, strokeOptopns?) => R)

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

Type declaration

    • (zA, zB, color, lineWidth?, headLength?, strokeOptopns?): R

    • Parameters

      • zA: XYCoords

        The start point of the arrow-line.

      • zB: XYCoords

        The end point of the arrow-line.

      • color: string

        Any valid CSS color string.

      • Optional lineWidth: number

        (optional) The line width to use; default is 1.

      • Optional headLength: number

        (optional) The length of the arrow head (default is 8 units).

      • Optional strokeOptopns: StrokeOptions

      Returns R

Method

arrow

Returns

Instance

Memberof

DrawLib

arrowHead

arrowHead: ((zA, zB, color, lineWidth?, headLength?, strokeOptopns?) => 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.

Type declaration

    • (zA, zB, color, lineWidth?, headLength?, strokeOptopns?): R

    • Parameters

      • zA: XYCoords

        The start point of the arrow-line.

      • zB: XYCoords

        The end point of the arrow-line.

      • color: string

        Any valid CSS color string.

      • Optional lineWidth: number

        (optional) The line width to use; default is 1.

      • Optional headLength: number

        (optional) The length of the arrow head (default is 8 pixels).

      • Optional strokeOptopns: StrokeOptions

      Returns R

Method

arrow

Returns

Instance

Memberof

DrawLib

beginDrawCycle

beginDrawCycle: ((renderTime) => R)

Called before each draw cycle.

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

Type declaration

    • (renderTime): R

    • Parameters

      • renderTime: number

      Returns R

Name

beginDrawCycle

Method

Instance

circle

circle: ((center, radius, color, lineWidth?, 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.

Type declaration

    • (center, radius, color, lineWidth?, strokeOptions?): R

    • Parameters

      • center: XYCoords

        The center of the circle.

      • radius: number

        The radius of the circle.

      • color: string

        The CSS color to draw the circle with.

      • Optional lineWidth: number

        (optional) The line width to use; default is 1.

      • Optional strokeOptions: StrokeOptions

        (optional) Stroke settings to use.

      Returns R

Method

circle

Returns

Instance

Memberof

DrawLib

circleArc

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

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

Type declaration

    • (center, radius, startAngle, endAngle, color, lineWidth?, strokeOptions?): R

    • Parameters

      • center: XYCoords

        The center of the circle.

      • radius: number

        The radius of the circle.

      • startAngle: number

        The angle to start at.

      • endAngle: number

        The angle to end at.

      • color: string

        The CSS color to draw the circle with.

      • Optional lineWidth: number

        (optional) The line width to use; default is 1.

      • Optional strokeOptions: StrokeOptions

        (optional) Stroke settings to use.

      Returns R

Method

circleArc

Returns

Instance

Memberof

DrawLib

circleHandle

circleHandle: ((center, size, color) => 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.

Type declaration

    • (center, size, color): R

    • Parameters

      • center: XYCoords

        The center of the circle.

      • size: number
      • color: string

        The CSS color to draw the circle with.

      Returns R

Method

circleHandle

Returns

Instance

Memberof

DrawLib

clear

clear: ((color) => 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.

Type declaration

    • (color): R

    • Parameters

      • color: string

        The color to clear with.

      Returns R

cross

cross: ((center, radius, color, lineWidth?) => 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.

Type declaration

    • (center, radius, color, lineWidth?): R

    • Parameters

      • center: XYCoords

        The center of the crosshair.

      • radius: number

        The radius of the crosshair.

      • color: string

        The CSS color to draw the crosshair with.

      • Optional lineWidth: number

        (optional, default=1.0) The line width to use.

      Returns R

Method

crosshair

Returns

Instance

Memberof

DrawLib

crosshair

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

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

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

Type declaration

    • (center, radius, color, lineWidth?): R

    • Parameters

      • center: XYCoords

        The center of the crosshair.

      • radius: number

        The radius of the crosshair.

      • color: string

        The CSS color to draw the crosshair with.

      • Optional lineWidth: number

        (optional, default=0.5) The line width to use.

      Returns R

Method

crosshair

Returns

Instance

Memberof

DrawLib

cubicBezier

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

Draw the given (cubic) bézier curve.

Type declaration

    • (startPoint, endPoint, startControlPoint, endControlPoint, color, lineWidth?, strokeOptopns?): R

    • Parameters

      • startPoint: XYCoords

        The start point of the cubic Bézier curve

      • endPoint: XYCoords

        The end point the cubic Bézier curve.

      • startControlPoint: XYCoords

        The start control point the cubic Bézier curve.

      • endControlPoint: XYCoords

        The end control point the cubic Bézier curve.

      • color: string

        The CSS color to draw the curve with.

      • Optional lineWidth: number

        (optional) The line width to use.

      • Optional strokeOptopns: StrokeOptions

      Returns R

Method

cubicBezier

Returns

Instance

Memberof

DrawLib

cubicBezierArrow

cubicBezierArrow: ((startPoint, endPoint, startControlPoint, endControlPoint, color, lineWidth?, headLength?, strokeOptopns?) => 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.

Type declaration

    • (startPoint, endPoint, startControlPoint, endControlPoint, color, lineWidth?, headLength?, strokeOptopns?): R

    • Parameters

      • startPoint: XYCoords

        The start point of the cubic Bézier curve

      • endPoint: XYCoords

        The end point the cubic Bézier curve.

      • startControlPoint: XYCoords

        The start control point the cubic Bézier curve.

      • endControlPoint: XYCoords

        The end control point the cubic Bézier curve.

      • color: string

        The CSS color to draw the curve with.

      • Optional lineWidth: number

        (optional) The line width to use.

      • Optional headLength: number

        (optional) The length of the arrow head (default is 8 units).

      • Optional strokeOptopns: StrokeOptions

      Returns R

Method

cubicBezierArrow

Returns

Instance

Memberof

DrawLib

cubicBezierPath

cubicBezierPath: ((path, color, lineWidth?, strokeOptopns?) => 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 ]

Type declaration

    • (path, color, lineWidth?, strokeOptopns?): R

    • Parameters

      • path: XYCoords[]

        The cubic bezier path as described above.

      • color: string

        The CSS colot to draw the path with.

      • Optional lineWidth: number

        (optional) The line width to use.

      • Optional strokeOptopns: StrokeOptions

      Returns R

Method

cubicBezierPath

Returns

Instance

Memberof

DrawLib

diamondHandle

diamondHandle: ((center, size, color) => 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.

Type declaration

    • (center, size, color): R

    • Parameters

      • center: XYCoords

        The center of the diamond.

      • size: number

        The x/y-size of the diamond.

      • color: string

        The CSS color to draw the diamond with.

      Returns R

Method

diamondHandle

Returns

Instance

Memberof

DrawLib

dot

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

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

Type declaration

    • (p, color): R

    • Parameters

      • p: XYCoords

        The position to draw the dot at.

      • color: string

        The CSS color to draw the dot with.

      Returns R

Method

dot

Returns

Instance

Memberof

DrawLib

ellipse

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

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

Type declaration

    • (center, radiusX, radiusY, color, lineWidth?, rotation?, strokeOptions?): R

    • Parameters

      • center: XYCoords

        The center of the ellipse.

      • radiusX: number

        The radius of the ellipse.

      • radiusY: number

        The radius of the ellipse.

      • color: string

        The CSS color to draw the ellipse with.

      • Optional lineWidth: number

        (optional) The line width to use; default is 1.

      • Optional rotation: number

        (optional, default=0) The rotation of the ellipse.

      • Optional strokeOptions: StrokeOptions

        (optional) Stroke settings to use.

      Returns R

Method

ellipse

Returns

Instance

Memberof

DrawLib

endDrawCycle

endDrawCycle: ((renderTime) => R)

Called after each draw cycle.

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

Type declaration

    • (renderTime): R

    • Parameters

      • renderTime: number

      Returns R

Name

endDrawCycle

Method

Instance

fillShapes

fillShapes: boolean

grid

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

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

Type declaration

    • (center, width, height, sizeX, sizeY, color): R

    • Parameters

      • center: XYCoords

        The center of the grid.

      • width: number

        The total width of the grid (width/2 each to the left and to the right).

      • height: number

        The total height of the grid (height/2 each to the top and to the bottom).

      • sizeX: number

        The horizontal grid size.

      • sizeY: number

        The vertical grid size.

      • color: string

        The CSS color to draw the grid with.

      Returns R

Method

grid

Returns

Instance

Memberof

DrawLib

handle

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

Type declaration

    • (startPoint, endPoint): R

    • Parameters

      • startPoint: XYCoords

        The start of the handle.

      • endPoint: XYCoords

        The end point of the handle.

      Returns R

Method

handle

Returns

Instance

Memberof

DrawLib

handleLine

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

Draw a handle line (with a light grey).

Type declaration

    • (startPoint, endPoint): R

    • Parameters

      • startPoint: XYCoords

        The start point to draw the handle at.

      • endPoint: XYCoords

        The end point to draw the handle at.

      Returns R

Method

handleLine

Returns

Instance

Memberof

DrawLib

image

image: ((image, position, size, alpha?) => 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.

Type declaration

    • (image, position, size, alpha?): R

    • Parameters

      • image: HTMLImageElement

        The image object to draw.

      • position: XYCoords

        The position to draw the the upper left corner at.

      • size: XYCoords

        The x/y-size to draw the image with.

      • Optional alpha: number

        (optional, default=0.0) The transparency (1.0=opaque, 0.0=transparent).

      Returns R

Method

image

Returns

Instance

Memberof

DrawLib

label

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

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

Type declaration

    • (text, x, y, rotation?, color?): R

    • Parameters

      • text: string

        The text to draw.

      • x: number

        The x-position to draw the text at.

      • y: number

        The y-position to draw the text at.

      • Optional rotation: number

        The (aoptional) rotation in radians.

      • Optional color: string

        The color to use (default is black).

      Returns R

Method

label

Returns

Instance

Memberof

DrawLib

line

line: ((zA, zB, color, lineWidth?, strokeOptopns?) => R)

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

Type declaration

    • (zA, zB, color, lineWidth?, strokeOptopns?): R

    • Parameters

      • zA: XYCoords

        The start point of the line.

      • zB: XYCoords

        The end point of the line.

      • color: string

        Any valid CSS color string.

      • Optional lineWidth: number
      • Optional strokeOptopns: StrokeOptions

      Returns R

Method

line

Returns

Instance

Memberof

DrawLib

offset

offset: Vertex

path

path: ((pathData, color?, lineWidth?, options?) => R)

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

Type declaration

    • (pathData, color?, lineWidth?, options?): R

    • Parameters

      • pathData: SVGPathParams

        An array of path commands and params.

      • Optional color: string

        (optional) The color to draw this path with (default is null).

      • Optional lineWidth: number

        (optional) the line width to use (default is 1).

      • Optional options: {
            inplace?: boolean;
        } & StrokeOptions

      Returns R

Method

path

Instance

Memberof

DrawLib

Returns

An instance representing the drawn path.

point

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

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

Type declaration

    • (p, color): R

    • Parameters

      • p: XYCoords

        The position to draw the point at.

      • color: string

        The CSS color to draw the point with.

      Returns R

Method

point

Returns

Instance

Memberof

DrawLib

polygon

polygon: ((polygon, color, lineWidth?, strokeOptions?) => R)

Draw a polygon.

Type declaration

    • (polygon, color, lineWidth?, strokeOptions?): R

    • Parameters

      • polygon: Polygon

        The polygon to draw.

      • color: string

        The CSS color to draw the polygon with.

      • Optional lineWidth: number

        The line width to draw this polygon with.

      • Optional strokeOptions: StrokeOptions

        (optional) Stroke settings to use.

      Returns R

Method

polygon

Returns

Instance

Memberof

DrawLib

polyline

polyline: ((vertices, isOpen, color, lineWidth?, strokeOptions?) => R)

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

Type declaration

    • (vertices, isOpen, color, lineWidth?, strokeOptions?): R

    • Parameters

      • vertices: XYCoords[]

        The polygon vertices to draw.

      • isOpen: boolean

        If true the polyline will not be closed at its end.

      • color: string

        The CSS color to draw the polygon with.

      • Optional lineWidth: number

        (optional) The line width to use; default is 1.

      • Optional strokeOptions: StrokeOptions

        (optional) Stroke settings to use.

      Returns R

Method

polyline

Returns

Instance

Memberof

DrawLib

raster

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

Draw a raster of crosshairs in the given grid.

This works analogue to the grid() function

Type declaration

    • (center, width, height, sizeX, sizeY, color): R

    • Parameters

      • center: XYCoords

        The center of the raster.

      • width: number

        The total width of the raster (width/2 each to the left and to the right).

      • height: number

        The total height of the raster (height/2 each to the top and to the bottom).

      • sizeX: number

        The horizontal raster size.

      • sizeY: number

        The vertical raster size.

      • color: string

        The CSS color to draw the raster with.

      Returns R

Method

raster

Returns

Instance

Memberof

DrawLib

rect

rect: ((upperLeft, width, height, color, lineWidth?, strokeOptions?) => R)

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

Type declaration

    • (upperLeft, width, height, color, lineWidth?, strokeOptions?): R

    • Parameters

      • upperLeft: XYCoords
      • width: number

        The width of the rectangle.

      • height: number

        The height of the rectangle.

      • color: string

        The CSS color to draw the rectangle with.

      • Optional lineWidth: number

        (optional) The line width to use; default is 1.

      • Optional strokeOptions: StrokeOptions

        (optional) Stroke settings to use.

      Returns R

Method

rect

Returns

Instance

Memberof

DrawLib

scale

scale: Vertex

setConfiguration

setConfiguration: ((configuration) => void)

Set the current drawlib configuration.

Type declaration

    • (configuration): void

    • Parameters

      • configuration: DrawLibConfiguration

        The new configuration settings to use for the next render methods.

      Returns void

Name

setConfiguration

Method

setCurrentClassName

setCurrentClassName: ((className) => void)

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

Type declaration

    • (className): void

    • Parameters

      • className: string

        A class name for further custom use cases.

      Returns void

Name

setCurrentClassName

Method

setCurrentId

setCurrentId: ((uid) => 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.

Type declaration

    • (uid): void

    • Parameters

      • uid: string

        A UID identifying the currently drawn element(s), or null to clear.

      Returns void

Name

setCurrentId

Method

square

square: ((center, size, color, lineWidth?, 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.

Type declaration

    • (center, size, color, lineWidth?, strokeOptions?): R

    • Parameters

      • center: XYCoords

        The center of the square.

      • size: number

        The size of the square.

      • color: string

        The CSS color to draw the square with.

      • Optional lineWidth: number

        (optional) The line width to use; default is 1.

      • Optional strokeOptions: StrokeOptions

        (optional) Stroke settings to use.

      Returns R

Method

square

Returns

Instance

Memberof

DrawLib

squareHandle

squareHandle: ((center, size, color) => 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.

Type declaration

    • (center, size, color): R

    • Parameters

      • center: XYCoords

        The center of the square.

      • size: number

        The x/y-size of the square.

      • color: string

        The CSS color to draw the square with.

      Returns R

Method

squareHandle

Returns

Instance

Memberof

DrawLib

text

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

Draw a text at the given relative position.

Type declaration

    • (text, x, y, options?): R

    • Parameters

      • text: string

        The text to draw.

      • x: number

        The x-position to draw the text at.

      • y: number

        The y-position to draw the text at.

      • Optional options: FontOptions

      Returns R

Method

text

Returns

Instance

Memberof

DrawLib

texturedPoly

texturedPoly: ((textureImage, textureSize, polygon, polygonPosition, rotation) => 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.

Type declaration

    • (textureImage, textureSize, polygon, polygonPosition, rotation): R

    • Parameters

      • textureImage: HTMLImageElement

        The image object to draw.

      • textureSize: Bounds

        The texture size to use; these are the original bounds to map the polygon vertices to.

      • polygon: Polygon

        The polygon to use as clip path.

      • polygonPosition: XYCoords

        The polygon's position (relative), measured at the bounding box's center.

      • rotation: number

        The rotation to use for the polygon (and for the texture).

      Returns R

Method

texturedPoly

Returns

Instance

Memberof

DrawLib

On This Page