drawutilsgl | plotboilerplate

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

DrawLib<void>

Index

Constructors

constructor

Properties

Methods

Constructors

constructor

new drawutilsgl(context: WebGLRenderingContext, fillShapes: boolean): drawutilsgl

- Defined in src/ts/drawgl.ts:82
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 | null

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

- Defined in src/ts/drawgl.ts:385
Parameters
- color: string
Returns void

_x2rel

_x2rel(x: number): number

- Defined in src/ts/drawgl.ts:120
Parameters
- x: number
Returns number

_y2rel

_y2rel(y: number): number

- Defined in src/ts/drawgl.ts:123
Parameters
- y: number
Returns number

arrow

arrow(zA: XYCoords, zB: XYCoords, color: string): void

- Defined in src/ts/drawgl.ts:282
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: XYCoords
  
  The start point of the arrow-line.
- zB: XYCoords
  
  The end point of the arrow-line.
- color: string
  
  Any valid CSS color string.
Returns void

arrowHead

arrowHead(zA: XYCoords, zB: XYCoords, color: string, lineWidth?: number, headLength?: number): void

- Defined in src/ts/drawgl.ts:327
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

instance

memberof

DrawLib

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).
Returns void

beginDrawCycle

beginDrawCycle(renderTime: number): void

- Defined in src/ts/drawgl.ts:145
Called before each draw cycle.

Parameters
- renderTime: number
Returns void

circle

circle(center: XYCoords, radius: number, color: string, lineWidth?: number): void

- Defined in src/ts/drawgl.ts:505
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: 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.
Returns void

circleArc

circleArc(center: XYCoords, radius: number, startAngle: number, endAngle: number, color: string, lineWidth?: number): void

- Defined in src/ts/drawgl.ts:522
Draw a circular arc (section of a circle) with the given CSS color.

method

circleArc

instance

memberof

drawutils

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
Returns void

circleHandle

circleHandle(center: XYCoords, size: number, color: string): void

- Defined in src/ts/drawgl.ts:666
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: XYCoords
  
  The center of the circle.
- size: number
- color: string
  
  The CSS color to draw the circle with.
Returns void

clear

clear(color: string): void

- Defined in src/ts/drawgl.ts:852
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

copyInstance(fillShapes: boolean): drawutilsgl

- Defined in src/ts/drawgl.ts:131
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

- Defined in src/ts/drawgl.ts:702
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

- Defined in src/ts/drawgl.ts:684
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: XYCoords, endPoint: XYCoords, startControlPoint: XYCoords, endControlPoint: XYCoords, color: string, lineWidth?: number): void

- Defined in src/ts/drawgl.ts:403
Draw the given (cubic) bézier curve.

method

cubicBezier

instance

memberof

drawutils

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

cubicBezierArrow

cubicBezierArrow(startPoint: XYCoords, endPoint: XYCoords, startControlPoint: XYCoords, endControlPoint: XYCoords, color: string, lineWidth?: number, headLength?: number): void

- Defined in src/ts/drawgl.ts:302
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

instance

memberof

DrawLib

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).
Returns void

cubicBezierPath

cubicBezierPath(path: Array<XYCoords>, color: string, lineWidth?: number): void

- Defined in src/ts/drawgl.ts:429
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<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; default is 1.
Returns void

diamondHandle

diamondHandle(center: XYCoords, size: number, color: string): void

- Defined in src/ts/drawgl.ts:628
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: 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 void

dot

dot(p: XYCoords, color: string): void

- Defined in src/ts/drawgl.ts:473
Draw a 1x1 dot with the specified (CSS-) color.

method

dot

instance

memberof

drawutils

Parameters
- p: XYCoords
  
  The position to draw the dot at.
- color: string
  
  The CSS color to draw the dot with.
Returns void

ellipse

ellipse(center: XYCoords, radiusX: number, radiusY: number, color: string, lineWidth?: number, rotation?: number): void

- Defined in src/ts/drawgl.ts:540
Draw an ellipse with the specified (CSS-) color and thw two radii.

method

ellipse

instance

memberof

drawutils

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.
Returns void

endDrawCycle

endDrawCycle(renderTime: number): void

- Defined in src/ts/drawgl.ts:160
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: XYCoords, width: number, height: number, sizeX: number, sizeY: number, color: string): void

- Defined in src/ts/drawgl.ts:589
Draw a grid of horizontal and vertical lines with the given (CSS-) color.

method

grid

instance

memberof

drawutils

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 void

handle

handle(startPoint: XYCoords, endPoint: XYCoords): void

- Defined in src/ts/drawgl.ts:445
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: XYCoords
  
  The start of the handle.
- endPoint: XYCoords
  
  The end point of the handle.
Returns void

handleLine

handleLine(startPoint: XYCoords, endPoint: XYCoords): void

- Defined in src/ts/drawgl.ts:459
Draw a handle line (with a light grey).

method

handleLine

instance

memberof

drawutils

Parameters
- startPoint: XYCoords
  
  The start point to draw the handle at.
- endPoint: XYCoords
  
  The end point to draw the handle at.
Returns void

image

image(image: HTMLImageElement, position: XYCoords, size: XYCoords, alpha?: number): void

- Defined in src/ts/drawgl.ts:345
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: XYCoords
  
  The position to draw the the upper left corner at.
- size: XYCoords
  
  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

- Defined in src/ts/drawgl.ts:824
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

line(zA: XYCoords, zB: XYCoords, color: string): void

- Defined in src/ts/drawgl.ts:226
Draw the line between the given two points with the specified (CSS-) color.

method

line

instance

memberof

drawutils

Parameters
- zA: XYCoords
  
  The start point of the line.
- zB: XYCoords
  
  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

- Defined in src/ts/drawgl.ts:840
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: XYCoords, color: string): void

- Defined in src/ts/drawgl.ts:487
Draw the given point with the specified (CSS-) color and radius 3.

method

point

instance

memberof

drawutils

Parameters
- p: XYCoords
  
  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

- Defined in src/ts/drawgl.ts:716
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<XYCoords>, isOpen: boolean, color: string, lineWidth?: number): void

- Defined in src/ts/drawgl.ts:770
Draw a polygon line (alternative function to the polygon).

method

polyline

instance

memberof

drawutils

Parameters
- vertices: Array<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.
Returns void

raster

raster(center: XYCoords, width: number, height: number, sizeX: number, sizeY: number, color: string): void

- Defined in src/ts/drawgl.ts:609
Draw a raster of crosshairs in the given grid.

This works analogue to the grid() function

method

raster

instance

memberof

drawutils

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 void

rect

rect(position: XYCoords, width: number, height: number, color: string, lineWidth?: number): void

- Defined in src/ts/drawgl.ts:571
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

setConfiguration(configuration: DrawLibConfiguration): void

- Defined in src/ts/drawgl.ts:171
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 | null): void

- Defined in src/ts/drawgl.ts:211
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 | null
  
  A class name for further custom use cases.
Returns void

setCurrentId

setCurrentId(uid: UID | null): void

- Defined in src/ts/drawgl.ts:198
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 | null
  
  A UID identifying the currently drawn element(s).es.
Returns void

square

square(center: XYCoords, size: number, color: string, lineWidth?: number): void

- Defined in src/ts/drawgl.ts:558
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: XYCoords, size: number, color: string): void

- Defined in src/ts/drawgl.ts:647
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: 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 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

- Defined in src/ts/drawgl.ts:793
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: XYCoords, rotation: number): void

- Defined in src/ts/drawgl.ts:364
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: 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 void

Generated using TypeDoc

Hierarchy

Implements

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

context: WebGLRenderingContext

fillShapes: boolean

Returns drawutilsgl

Properties

Private _fragShader

Private _program

Private _vertShader

Private _zindex

Private curId

fillShapes

gl

Private glutils

Readonly offset

Private renderTime

Readonly scale

Private vertex_buffer

Static Private fragCode

Static Private vertCode

Methods

_fillOrDraw

Parameters

color: string

Returns void

_x2rel

Parameters

x: number

Returns number

_y2rel

Parameters

y: number

Returns number

arrow

Parameters

zA: XYCoords

zB: XYCoords

color: string

Returns void

arrowHead

Parameters

zA: XYCoords

zB: XYCoords

color: string

Optional lineWidth: number

Optional headLength: number

Returns void

beginDrawCycle

Parameters

renderTime: number

Returns void

circle

Parameters

center: XYCoords

radius: number

color: string

Optional lineWidth: number

Returns void

circleArc

Parameters

center: XYCoords

radius: number

startAngle: number

endAngle: number

color: string

Optional lineWidth: number

Returns void

circleHandle

Parameters

center: XYCoords

size: number

color: string

Returns void