Options
All
  • Public
  • Public/Protected
  • All
Menu
classdesc

A wrapper class for basic drawing operations. This is the WebGL implementation whih sould work with shaders.

requires

CubicBzierCurvce

requires

Polygon

requires

SVGSerializable

requires

Vertex

requires

XYCoords

Hierarchy

  • drawutilsgl

Implements

Index

Constructors

constructor

  • new drawutilsgl(context: WebGLRenderingContext, fillShapes: boolean): drawutilsgl
  • The constructor.

    name

    drawutils

    Parameters

    • context: WebGLRenderingContext

      The drawing context.

    • fillShapes: boolean

    Returns drawutilsgl

Properties

Private _fragShader

_fragShader: WebGLShader

Private _program

_program: WebGLProgram

Private _vertShader

_vertShader: WebGLShader

Private _zindex

_zindex: number

Private curId

curId: UID | undefined

fillShapes

fillShapes: boolean

gl

gl: WebGLRenderingContext

Private glutils

glutils: GLU

Readonly offset

offset: Vertex

Private renderTime

renderTime: number

Readonly scale

scale: Vertex

Private vertex_buffer

vertex_buffer: WebGLBuffer

Static Private fragCode

fragCode: string = `precision highp float;void main(void) {gl_FragColor = vec4(0.0,0.75,1.0,1.0);}`

Static Private vertCode

vertCode: string = `precision mediump float;attribute vec3 position;uniform vec2 uRotationVector;void main(void) {vec2 rotatedPosition = vec2(position.x * uRotationVector.y +position.y * uRotationVector.x,position.y * uRotationVector.y -position.x * uRotationVector.x);gl_Position = vec4(rotatedPosition, position.z, 1.0);}`

Methods

_fillOrDraw

  • _fillOrDraw(color: string): void

_x2rel

  • _x2rel(x: number): number

_y2rel

  • _y2rel(y: number): number

arrow

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

    method

    arrow

    instance
    memberof

    drawutils

    Parameters

    • zA: Vertex

      The start point of the arrow-line.

    • zB: Vertex

      The end point of the arrow-line.

    • color: string

      Any valid CSS color string.

    Returns void

beginDrawCycle

  • beginDrawCycle(renderTime: number): void
  • Called before each draw cycle.

    Parameters

    • renderTime: number

    Returns void

circle

  • circle(center: Vertex, radius: number, color: string, lineWidth?: number): void
  • 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

    instance
    memberof

    drawutils

    Parameters

    • center: Vertex

      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.

    Returns void

circleArc

  • circleArc(center: Vertex, radius: number, startAngle: number, endAngle: number, color: string, lineWidth?: number): void
  • Draw a circular arc (section of a circle) with the given CSS color.

    method

    circleArc

    instance
    memberof

    drawutils

    Parameters

    • center: Vertex

      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

    Returns void

circleHandle

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

    instance
    memberof

    drawutils

    Parameters

    • center: Vertex

      The center of the circle.

    • size: number
    • color: string

      The CSS color to draw the circle with.

    Returns void

clear

  • clear(color: string): void
  • 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.

    Parameters

    • color: string

      The color to clear with.

    Returns void

copyInstance

  • Creates a 'shallow' (non deep) copy of this instance. This implies that under the hood the same gl context and gl program will be used.

    Parameters

    • fillShapes: boolean

    Returns drawutilsgl

cross

  • cross(center: XYCoords, radius: number, color: string, lineWidth?: number): void
  • 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

    instance
    memberof

    drawutils

    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 void

crosshair

  • crosshair(center: XYCoords, radius: number, color: string, lineWidth?: number): void
  • 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

    instance
    memberof

    drawutils

    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 void

cubicBezier

  • cubicBezier(startPoint: Vertex, endPoint: Vertex, startControlPoint: Vertex, endControlPoint: Vertex, color: string, lineWidth?: number): void
  • Draw the given (cubic) bézier curve.

    method

    cubicBezier

    instance
    memberof

    drawutils

    Parameters

    • startPoint: Vertex

      The start point of the cubic Bézier curve

    • endPoint: Vertex

      The end point the cubic Bézier curve.

    • startControlPoint: Vertex

      The start control point the cubic Bézier curve.

    • endControlPoint: Vertex

      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; default is 1.

    Returns void

cubicBezierPath

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

    instance
    memberof

    drawutils

    Parameters

    • path: Array<Vertex>

      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; default is 1.

    Returns void

diamondHandle

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

    instance
    memberof

    drawutils

    Parameters

    • center: Vertex

      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 void

dot

  • dot(p: Vertex, color: string): void
  • Draw a 1x1 dot with the specified (CSS-) color.

    method

    dot

    instance
    memberof

    drawutils

    Parameters

    • p: Vertex

      The position to draw the dot at.

    • color: string

      The CSS color to draw the dot with.

    Returns void

ellipse

  • ellipse(center: Vertex, radiusX: number, radiusY: number, color: string, lineWidth?: number, rotation?: number): void
  • Draw an ellipse with the specified (CSS-) color and thw two radii.

    method

    ellipse

    instance
    memberof

    drawutils

    Parameters

    • center: Vertex

      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.

    Returns void

endDrawCycle

  • endDrawCycle(renderTime: number): void
  • Called after each draw cycle.

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

    name

    endDrawCycle

    method
    instance

    Parameters

    • renderTime: number

    Returns void

grid

  • grid(center: Vertex, width: number, height: number, sizeX: number, sizeY: number, color: string): void
  • Draw a grid of horizontal and vertical lines with the given (CSS-) color.

    method

    grid

    instance
    memberof

    drawutils

    Parameters

    • center: Vertex

      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 void

handle

  • 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

    instance
    memberof

    drawutils

    Parameters

    • startPoint: Vertex

      The start of the handle.

    • endPoint: Vertex

      The end point of the handle.

    Returns void

handleLine

  • Draw a handle line (with a light grey).

    method

    handleLine

    instance
    memberof

    drawutils

    Parameters

    • startPoint: Vertex

      The start point to draw the handle at.

    • endPoint: Vertex

      The end point to draw the handle at.

    Returns void

image

  • image(image: HTMLImageElement, position: Vertex, size: Vertex, alpha?: number): void
  • 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

    instance
    memberof

    drawutils

    Parameters

    • image: HTMLImageElement

      The image object to draw.

    • position: Vertex

      The position to draw the the upper left corner at.

    • size: Vertex

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

    • Default value alpha: number = 0

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

    Returns void

label

  • label(text: string, x: number, y: number, rotation?: number, color?: string): void
  • Draw a non-scaling text label at the given position.

    method

    label

    instance
    memberof

    drawutils

    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 void

line

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

    method

    line

    instance
    memberof

    drawutils

    Parameters

    • zA: Vertex

      The start point of the line.

    • zB: Vertex

      The end point of the line.

    • color: string

      Any valid CSS color string.

    Returns void

path

  • path(pathData: SVGPathParams, color?: string, lineWidth?: number, options?: { inplace?: boolean }): void
  • Draw an SVG-like path given by the specified path data.

    method

    path

    instance
    memberof

    drawutils

    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 }
      • Optional inplace?: boolean

        (optional) If set to true then path transforamtions (scale and translate) will be done in-place in the array. This can boost the performance.

    Returns void

    An instance representing the drawn path.

point

  • point(p: Vertex, color: string): void
  • Draw the given point with the specified (CSS-) color and radius 3.

    method

    point

    instance
    memberof

    drawutils

    Parameters

    • p: Vertex

      The position to draw the point at.

    • color: string

      The CSS color to draw the point with.

    Returns void

polygon

  • polygon(polygon: Polygon, color: string, lineWidth?: number): void
  • Draw a polygon.

    method

    polygon

    instance
    memberof

    drawutils

    Parameters

    • polygon: Polygon

      The polygon to draw.

    • color: string

      The CSS color to draw the polygon with.

    • Optional lineWidth: number

    Returns void

polyline

  • polyline(vertices: Array<Vertex>, isOpen: boolean, color: string, lineWidth?: number): void
  • Draw a polygon line (alternative function to the polygon).

    method

    polyline

    instance
    memberof

    drawutils

    Parameters

    • vertices: Array<Vertex>

      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.

    Returns void

raster

  • raster(center: Vertex, width: number, height: number, sizeX: number, sizeY: number, color: string): void
  • Draw a raster of crosshairs in the given grid.

    This works analogue to the grid() function

    method

    raster

    instance
    memberof

    drawutils

    Parameters

    • center: Vertex

      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 void

rect

  • rect(position: XYCoords, width: number, height: number, color: string, lineWidth?: number): void
  • Draw a rectangle.

    Parameters

    • position: XYCoords

      The upper left corner of the rectangle.

    • width: number

      The width of the rectangle.

    • height: number

      The height of the rectangle.

    • color: string

      The color to use.

    • Optional lineWidth: number

      (optional) The line with to use (default is 1).

    Returns void

setConfiguration

  • Set the current drawlib configuration.

    name

    setConfiguration

    method

    Parameters

    • configuration: DrawLibConfiguration

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

    Returns void

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

    Parameters

    • className: string | undefined

      A class name for further custom use cases.

    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

    Parameters

    • uid: UID | undefined

      A UID identifying the currently drawn element(s).es.

    Returns void

square

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

    instance
    memberof

    drawutils

    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.

    Returns void

squareHandle

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

    instance
    memberof

    drawutils

    Parameters

    • center: Vertex

      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 void

text

  • text(text: string, x: number, y: number, options?: { color?: string; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; lineHeight?: number; rotation?: number; textAlign?: CanvasRenderingContext2D["textAlign"] }): void
  • Draw a text at the given relative position.

    method

    text

    instance
    memberof

    drawutils

    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: { color?: string; fontFamily?: string; fontSize?: number; fontStyle?: FontStyle; fontWeight?: FontWeight; lineHeight?: number; rotation?: number; textAlign?: CanvasRenderingContext2D["textAlign"] }
      • Optional color?: string

        The Color to use.

      • Optional fontFamily?: string

        The font family to use.

      • Optional fontSize?: number

        The font size (in pixels) to use.

      • Optional fontStyle?: FontStyle

        The font style to use.

      • Optional fontWeight?: FontWeight

        The font weight to use.

      • Optional lineHeight?: number

        The line height (in pixels) to use.

      • Optional rotation?: number

        The (optional) rotation in radians.

      • Optional textAlign?: CanvasRenderingContext2D["textAlign"]

        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 void

texturedPoly

  • texturedPoly(textureImage: HTMLImageElement, textureSize: Bounds, polygon: Polygon, polygonPosition: Vertex, rotation: number): void
  • 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

    instance
    memberof

    drawutilsgl

    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: Vertex

      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 void

Legend

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

Generated using TypeDoc