Class drawutilsgl

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

Implements

DrawLib<void>

Constructors

constructor

new drawutilsgl(context, fillShapes): drawutilsgl
The constructor.
Parameters
- context: WebGLRenderingContext
  The drawing context.
- fillShapes: boolean
Returns drawutilsgl
Name
drawutils
- Defined in src/ts/drawgl.ts:92

Properties

`Private` _fragShader

_fragShader: WebGLShader

`Private` _program

_program: WebGLProgram

`Private` _vertShader

_vertShader: WebGLShader

`Private` _zindex

_zindex: number

`Private` curId

curId: string

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 = ...

`Static` `Private` vertCode

vertCode: string = ...

Methods

_fillOrDraw

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

_x2rel

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

_y2rel

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

arrow

arrow(zA, zB, color): void
Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
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
Method
arrow

Instance
Memberof
drawutils
Implementation of DrawLib.arrow
- Defined in src/ts/drawgl.ts:282

arrowHead

arrowHead(zA, zB, color, lineWidth?, headLength?): void
Draw just an arrow head a the end of an imaginary line (zB) of the given line width the specified (CSS-) color and size.
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
Method
arrow

Instance
Memberof
DrawLib
Implementation of DrawLib.arrowHead
- Defined in src/ts/drawgl.ts:327

beginDrawCycle

beginDrawCycle(renderTime): void
Called before each draw cycle.
Parameters
- renderTime: number
Returns void
Implementation of DrawLib.beginDrawCycle
- Defined in src/ts/drawgl.ts:145

circle

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

Instance
Memberof
drawutils
Implementation of DrawLib.circle
- Defined in src/ts/drawgl.ts:505

circleArc

circleArc(center, radius, startAngle, endAngle, color, lineWidth?): void
Draw a circular arc (section of a circle) with the given CSS color.
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
Method
circleArc

Instance
Memberof
drawutils
Implementation of DrawLib.circleArc
- Defined in src/ts/drawgl.ts:522

circleHandle

circleHandle(center, size, color): 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.
Parameters
- center: XYCoords
  The center of the circle.
- size: number
- color: string
  The CSS color to draw the circle with.
Returns void
Method
circleHandle

Instance
Memberof
drawutils
Implementation of DrawLib.circleHandle
- Defined in src/ts/drawgl.ts:666

clear

clear(color): 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
Implementation of DrawLib.clear
- Defined in src/ts/drawgl.ts:852

copyInstance

copyInstance(fillShapes): drawutilsgl
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
- Defined in src/ts/drawgl.ts:131

cross

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

Instance
Memberof
drawutils
Implementation of DrawLib.cross
- Defined in src/ts/drawgl.ts:702

crosshair

crosshair(center, radius, color, lineWidth?): void
Draw a crosshair with given radius and color at the given position.

Note that the crosshair radius will not be affected by scaling.
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
Method
crosshair

Instance
Memberof
drawutils
Implementation of DrawLib.crosshair
- Defined in src/ts/drawgl.ts:684

cubicBezier

cubicBezier(startPoint, endPoint, startControlPoint, endControlPoint, color, lineWidth?): void
Draw the given (cubic) bézier curve.
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
Method
cubicBezier

Instance
Memberof
drawutils
Implementation of DrawLib.cubicBezier
- Defined in src/ts/drawgl.ts:403

cubicBezierArrow

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

Instance
Memberof
DrawLib
Implementation of DrawLib.cubicBezierArrow
- Defined in src/ts/drawgl.ts:302

cubicBezierPath

cubicBezierPath(path, color, lineWidth?): 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 ]
```
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; default is 1.
Returns void
Method
cubicBezierPath

Instance
Memberof
drawutils
Implementation of DrawLib.cubicBezierPath
- Defined in src/ts/drawgl.ts:429

diamondHandle

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

Instance
Memberof
drawutils
Implementation of DrawLib.diamondHandle
- Defined in src/ts/drawgl.ts:628

dot

dot(p, color): void
Draw a 1x1 dot with the specified (CSS-) color.
Parameters
- p: XYCoords
  The position to draw the dot at.
- color: string
  The CSS color to draw the dot with.
Returns void
Method
dot

Instance
Memberof
drawutils
Implementation of DrawLib.dot
- Defined in src/ts/drawgl.ts:473

ellipse

ellipse(center, radiusX, radiusY, color, lineWidth?, rotation?): void
Draw an ellipse with the specified (CSS-) color and thw two radii.
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
Method
ellipse

Instance
Memberof
drawutils
Implementation of DrawLib.ellipse
- Defined in src/ts/drawgl.ts:540

endDrawCycle

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

This is required for compatibility with other draw classes in the library (like drawgl).
Parameters
- renderTime: number
Returns void
Name
endDrawCycle

Method
Instance
Implementation of DrawLib.endDrawCycle
- Defined in src/ts/drawgl.ts:160

grid

grid(center, width, height, sizeX, sizeY, color): void
Draw a grid of horizontal and vertical lines with the given (CSS-) color.
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
Method
grid

Instance
Memberof
drawutils
Implementation of DrawLib.grid
- Defined in src/ts/drawgl.ts:589

handle

handle(startPoint, endPoint): void
Draw the given handle and handle point (used to draw interactive Bézier curves).

The colors for this are fixed and cannot be specified.
Parameters
- startPoint: XYCoords
  The start of the handle.
- endPoint: XYCoords
  The end point of the handle.
Returns void
Method
handle

Instance
Memberof
drawutils
Implementation of DrawLib.handle
- Defined in src/ts/drawgl.ts:445

handleLine

handleLine(startPoint, endPoint): void
Draw a handle line (with a light grey).
Parameters
- startPoint: XYCoords
  The start point to draw the handle at.
- endPoint: XYCoords
  The end point to draw the handle at.
Returns void
Method
handleLine

Instance
Memberof
drawutils
Implementation of DrawLib.handleLine
- Defined in src/ts/drawgl.ts:459

image

image(image, position, size, alpha?): 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.
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.
- alpha: number = 0.0
  (optional, default=0.0) The transparency (0.0=opaque, 1.0=transparent).
Returns void
Method
image

Instance
Memberof
drawutils
Implementation of DrawLib.image
- Defined in src/ts/drawgl.ts:345

label

label(text, x, y, rotation?, color?): void
Draw a non-scaling text label at the given position.
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
Method
label

Instance
Memberof
drawutils
Implementation of DrawLib.label
- Defined in src/ts/drawgl.ts:824

line

line(zA, zB, color): void
Draw the line between the given two points with the specified (CSS-) color.
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
Method
line

Instance
Memberof
drawutils
Implementation of DrawLib.line
- Defined in src/ts/drawgl.ts:226

path

path(pathData, color?, lineWidth?, options?): void
Draw an SVG-like path given by the specified path data.
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.

Method
path

Instance
Memberof
drawutils
Implementation of DrawLib.path
- Defined in src/ts/drawgl.ts:840

point

point(p, color): void
Draw the given point with the specified (CSS-) color and radius 3.
Parameters
- p: XYCoords
  The position to draw the point at.
- color: string
  The CSS color to draw the point with.
Returns void
Method
point

Instance
Memberof
drawutils
Implementation of DrawLib.point
- Defined in src/ts/drawgl.ts:487

polygon

polygon(polygon, color, lineWidth?): void
Draw a polygon.
Parameters
- polygon: Polygon
  The polygon to draw.
- color: string
  The CSS color to draw the polygon with.
- Optional lineWidth: number
Returns void
Method
polygon

Instance
Memberof
drawutils
Implementation of DrawLib.polygon
- Defined in src/ts/drawgl.ts:716

polyline

polyline(vertices, isOpen, color, lineWidth?): void
Draw a polygon line (alternative function to the polygon).
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.
Returns void
Method
polyline

Instance
Memberof
drawutils
Implementation of DrawLib.polyline
- Defined in src/ts/drawgl.ts:770

raster

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

This works analogue to the grid() function
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
Method
raster

Instance
Memberof
drawutils
Implementation of DrawLib.raster
- Defined in src/ts/drawgl.ts:609

rect

rect(position, width, height, color, lineWidth?): 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
Implementation of DrawLib.rect
- Defined in src/ts/drawgl.ts:571

setConfiguration

setConfiguration(configuration): void
Set the current drawlib configuration.
Parameters
- configuration: DrawLibConfiguration
  The new configuration settings to use for the next render methods.
Returns void
Name
setConfiguration

Method
Implementation of DrawLib.setConfiguration
- Defined in src/ts/drawgl.ts:171

setCurrentClassName

setCurrentClassName(className): void
This method shouled be called each time the currently drawn Drawable changes. Determine the class name for further usage here.
Parameters
- className: string
  A class name for further custom use cases.
Returns void
Name
setCurrentClassName

Method
Implementation of DrawLib.setCurrentClassName
- Defined in src/ts/drawgl.ts:211

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.
Parameters
- uid: string
  A UID identifying the currently drawn element(s).es.
Returns void
Name
setCurrentId

Method
Implementation of DrawLib.setCurrentId
- Defined in src/ts/drawgl.ts:198

square

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

Instance
Memberof
drawutils
Implementation of DrawLib.square
- Defined in src/ts/drawgl.ts:558

squareHandle

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

Instance
Memberof
drawutils
Implementation of DrawLib.squareHandle
- Defined in src/ts/drawgl.ts:647

text

text(text, x, y, options?): void
Draw a text at the given relative position.
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?: CanvasTextAlign;
  }
  - 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?: CanvasTextAlign
    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
Method
text

Instance
Memberof
drawutils
Implementation of DrawLib.text
- Defined in src/ts/drawgl.ts:793

texturedPoly

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

Instance
Memberof
drawutilsgl
Implementation of DrawLib.texturedPoly
- Defined in src/ts/drawgl.ts:364

Class drawutilsgl

Classdesc

Requires

Requires

Requires

Requires

Requires

Implements

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns drawutilsgl

Name

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

Returns void

_x2rel

Parameters

Returns number

_y2rel

Parameters

Returns number

arrow

Parameters

Returns void

Method

Instance

Memberof

arrowHead

Parameters

Returns void

Method

Instance

Memberof

beginDrawCycle

Parameters

Returns void

circle

Parameters

Returns void

Method

Instance

Memberof

circleArc

Parameters

Returns void

Method

Instance

Memberof

circleHandle

Parameters

Returns void

Method

Instance

Memberof

clear

Parameters

Returns void

copyInstance

Parameters

`Private` _fragShader

`Private` _program

`Private` _vertShader

`Private` _zindex

`Private` curId

`Private` glutils

`Readonly` offset

`Private` renderTime

`Readonly` scale

`Private` vertex_buffer

`Static` `Private` fragCode

`Static` `Private` vertCode