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

A helper class for basic SVG drawing operations. This class should be compatible to the default 'draw' class.

requires

CubicBzierCurvce

requires

Polygon

requires

Vertex

requires

XYCoords

Hierarchy

  • drawutilssvg

Implements

Index

Constructors

constructor

  • new drawutilssvg(svgNode: SVGElement, offset: XYCoords, scale: XYCoords, canvasSize: XYDimension, fillShapes: boolean, drawConfig: DrawConfig, isSecondary?: boolean, gNode?: SVGGElement, bufferGNode?: SVGGElement, nodeDefs?: SVGDefsElement, bufferNodeDefs?: SVGDefsElement): drawutilssvg
  • The constructor.

    name

    drawutilssvg

    Parameters

    • svgNode: SVGElement

      The SVG node to use.

    • offset: XYCoords

      The draw offset to use.

    • scale: XYCoords

      The scale factors to use.

    • canvasSize: XYDimension

      The initial canvas size (use setSize to change).

    • fillShapes: boolean

      Indicates if the constructed drawutils should fill all drawn shapes (if possible).

    • drawConfig: DrawConfig

      The default draw config to use for CSS fallback styles.

    • Optional isSecondary: boolean

      (optional) Indicates if this is the primary or secondary instance. Only primary instances manage child nodes.

    • Optional gNode: SVGGElement

      (optional) Primary and seconday instances share the same <g> node.

    • Optional bufferGNode: SVGGElement
    • Optional nodeDefs: SVGDefsElement
    • Optional bufferNodeDefs: SVGDefsElement

    Returns drawutilssvg

Properties

Private bufferGNode

bufferGNode: SVGGElement

To avoid flickering the lib draws on a buffer, which is replacing the old node at the end of the draw cycle.

member

{SVGGelement}

memberof

drawutilssvg

instance

Private bufferedNodeDefs

bufferedNodeDefs: SVGDefsElement

The buffered nodeDefs.

member

{SVGGelement}

memberof

drawutilssvg

instance

Private cache

cache: Map<UID, SVGElement>

The SVG element cache. On clear() all elements are kept for possible re-use on next draw cycle.

canvasSize

canvasSize: XYDimension
member

{XYDimension}

memberof

drawutilssvg

instance

Private curClassName

curClassName: string | null

The current drawable-classname.

Private curId

curId: UID | null

The current drawable-ID. This can be any unique ID identifying the following drawn element.

member

{UID|null}

memberof

drawutilssvg

instance

drawlibConfiguration

drawlibConfiguration: DrawLibConfiguration

The current drawlib configuration to be used for all upcoming draw operations.

member

{DrawLibConfiguration}

memberof

drawutilssvg

instance

fillShapes

fillShapes: boolean
member

{boolean}

memberof

drawutilssvg

instance

Private gNode

gNode: SVGGElement

The root elements container in the svgNode.

Private isSecondary

isSecondary: boolean

Indicates if this library is the primary or seconday instance (draw an fill share the same DOM nodes).

Private nodeDefs

nodeDefs: SVGDefsElement

A style node of type <defs>.

member

{SVGGelement}

memberof

drawutilssvg

instance

Private nodeStyle

nodeStyle: SVGStyleElement

A style node of type <style>.

member

{SVGGelement}

memberof

drawutilssvg

instance

offset

offset: Vertex
member

{Vertex}

memberof

drawutilssvg

instance

scale

scale: Vertex
member

{Vertex}

memberof

drawutilssvg

instance

svgNode

svgNode: SVGElement
member

{SVGGElement}

memberof

drawutilssvg

instance

Static HEAD_XML

HEAD_XML: string = ['<?xml version="1.0" encoding="UTF-8" standalone="no"?>','<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" ',' "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">',""].join("\n")

Methods

Private _addCSSClasses

  • _addCSSClasses(node: SVGElement, className: string): void
  • Add custom CSS class names and the globally defined CSS classname to the given node.

    method

    addCSSClasses

    instance
    memberof

    drawutilssvg

    Parameters

    • node: SVGElement

      The SVG node to bind.

    • className: string

      The additional custom classname to add.

    Returns void

Private _bindFillDraw

  • _bindFillDraw(node: SVGElement, className: string, color?: string | null, lineWidth?: number | null, strokeOptions?: StrokeOptions): SVGElement
  • This is the final helper function for drawing and filling stuff and binding new nodes to the SVG document. It is not intended to be used from the outside.

    When in draw mode it draws the current shape. When in fill mode it fills the current shape.

    This function is usually only called internally.

    method

    _bindFillDraw

    instance
    memberof

    drawutilssvg

    Parameters

    • node: SVGElement

      The node to draw/fill and bind.

    • className: string

      The class name(s) to use.

    • Optional color: string | null

      A stroke/fill color to use.

    • Optional lineWidth: number | null

      (optional) A line width to use for drawing (default is 1).

    • Optional strokeOptions: StrokeOptions

    Returns SVGElement

    The node itself (for chaining).

Private _bindNode

  • _bindNode(node: SVGElement, bindingParent?: SVGElement): SVGElement
  • Bind this given node to a parent. If no parent is passed then the global node buffer will be used.

    method

    _bindNode

    instance
    memberof

    drawutilssvg

    Parameters

    • node: SVGElement

      The SVG node to bind.

    • Optional bindingParent: SVGElement

      (optional) You may pass node other than the glober buffer node.

    Returns SVGElement

    The passed node itself.

Private _configureNode

  • _configureNode(node: SVGElement, className: string, fillMode: boolean, color?: string | null, lineWidth?: number | null, strokeOptions?: StrokeOptions): SVGElement
  • Parameters

    • node: SVGElement
    • className: string
    • fillMode: boolean
    • Optional color: string | null
    • Optional lineWidth: number | null
    • Optional strokeOptions: StrokeOptions

    Returns SVGElement

Private _x

  • _x(x: number): number

Private _y

  • _y(y: number): number

addCustomStyleDefs

  • addCustomStyleDefs(defs: Map<string, string>): void
  • This is a simple way to include custom CSS class mappings to the style defs of the generated SVG.

    The mapping should be of the form [style-class] -> [style-def-string]

    Example: "rect.red" -> "fill: #ff0000; border: 1px solid red"

    Parameters

    • defs: Map<string, string>

    Returns void

Private addDefsNode

  • addDefsNode(): void

Private addStyleDefs

  • Adds a default style defintion based on the passed DrawConfig. Twaek the draw config to change default colors or line thicknesses.

    Parameters

    Returns void

Private applyStrokeOpts

  • applyStrokeOpts(node: SVGElement, strokeOptions?: StrokeOptions): void

arrow

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

    method

    arrow

    instance
    memberof

    drawutilssvg

    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.

    • Default value headLength: number = 8

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

    • Optional strokeOptions: StrokeOptions

      (optional) Stroke settings to use.

    Returns SVGElement

arrowHead

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

    • Default value headLength: number = 8

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

    • Optional strokeOptions: StrokeOptions

      (optional) Stroke settings to use.

    Returns SVGElement

beginDrawCycle

  • beginDrawCycle(renderTime: number): void
  • Called before each draw cycle. This is required for compatibility with other draw classes in the library.

    name

    beginDrawCycle

    method
    instance
    memberof

    drawutilssvg

    Parameters

    • renderTime: number

    Returns void

circle

  • circle(center: XYCoords, radius: number, color: string, lineWidth?: number, strokeOptions?: StrokeOptions): SVGElement
  • 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

    drawutilssvg

    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 SVGElement

circleArc

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

    method

    circleArc

    instance
    memberof

    drawutilssvg

    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 strokeOptions: StrokeOptions

      (optional) Stroke settings to use.

    Returns SVGElement

circleHandle

  • circleHandle(center: XYCoords, radius: number, color: string): SVGElement
  • 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

    drawutilssvg

    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.

    Returns SVGElement

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.

    instance
    memberof

    drawutilssvg

    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 drawutilssvg

Private createSVGNode

  • createSVGNode(nodeName: string): SVGElement
  • Create a new DOM node <svg> in the SVG namespace.

    method

    createSVGNode

    memberof

    drawutilssvg

    instance

    Parameters

    • nodeName: string

      The node name (tag-name).

    Returns SVGElement

    A new element in the SVG namespace with the given node name.

cross

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

crosshair

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

    drawutilssvg

    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 SVGElement

cubicBezier

  • Draw the given (cubic) bézier curve.

    method

    cubicBezier

    instance
    memberof

    drawutilssvg

    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 strokeOptions: StrokeOptions

      (optional) Stroke settings to use.

    Returns SVGElement

cubicBezierArrow

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

    • Default value headLength: number = 8

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

    • Optional strokeOptions: StrokeOptions

      (optional) Stroke settings to use.

    Returns SVGElement

cubicBezierPath

  • cubicBezierPath(path: Array<XYCoords>, color: string, lineWidth?: number, strokeOptions?: StrokeOptions): SVGElement
  • 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

    drawutilssvg

    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.

    • Optional strokeOptions: StrokeOptions

      (optional) Stroke settings to use.

    Returns SVGElement

diamondHandle

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

    drawutilssvg

    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 SVGElement

dot

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

    method

    dot

    instance
    memberof

    drawutilssvg

    Parameters

    • p: XYCoords

      The position to draw the dot at.

    • color: string

      The CSS color to draw the dot with.

    Returns SVGElement

ellipse

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

    method

    ellipse

    instance
    memberof

    drawutilssvg

    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 SVGElement

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

Private findElement

  • findElement(key: UID | null, nodeName: string): SVGElement | null
  • Retieve an old (cached) element. Only if both – key and nodeName – match, the element will be returned (null otherwise).

    method

    findElement

    memberof

    drawutilssvg

    instance

    Parameters

    • key: UID | null

      The key of the desired element (used when re-drawing).

    • nodeName: string

      The expected node name.

    Returns SVGElement | null

grid

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

    method

    grid

    instance
    memberof

    drawutilssvg

    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 SVGElement

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

    drawutilssvg

    Parameters

    • startPoint: XYCoords

      The start of the handle.

    • endPoint: XYCoords

      The end point of the handle.

    Returns void

handleLine

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

    method

    handleLine

    instance
    memberof

    drawutilssvg

    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): SVGElement
  • 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

    drawutilssvg

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

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

    Returns SVGElement

label

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

    method

    label

    instance
    memberof

    drawutilssvg

    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 (optional) rotation in radians.

    • Optional color: string

      The color to use (default is black).

    Returns SVGElement

line

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

    method

    line

    instance
    memberof

    drawutilssvg

    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 strokeOptions: StrokeOptions

      (optional) Stroke settings to use.

    Returns SVGElement

Private makeArrowHeadNode

  • makeArrowHeadNode(zA: XYCoords, zB: XYCoords, color: string, lineWidth?: number, headLength?: number, strokeOptions?: StrokeOptions, arrowHeadBasePositionBuffer?: XYCoords): SVGPathElement
  • Creates a basic arrow head node ( node) at the end of the given line coordinates. The created node will not be bound to any root node.

    method

    makeArrowHeadNode

    instance
    memberof

    drawutilssvg

    Parameters

    • zA: XYCoords
    • zB: XYCoords
    • color: string

      The CSS color to draw the point with.

    • Optional lineWidth: number

      (optional) The line width to use.

    • Default value headLength: number = 8

      (optional) The length of the arrow head; if none is specified then the head will be 8 absolute units long.

    • Optional strokeOptions: StrokeOptions

      (optional) Additional stroke options to use.

    • Optional arrowHeadBasePositionBuffer: XYCoords

      (optional) If not null, then this position will contain the arrow head's start point (after execution). Some sort of OUT variable.

    Returns SVGPathElement

Private makeCubicBezierNode

  • Creates a basic cubic Bézier path node ( node) with the given cubic Bézier data. The created node will not be bound to any root node.

    method

    makeCubicBezierNode

    instance
    memberof

    drawutilssvg

    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 point with.

    • Optional lineWidth: number

      (optional) The line width to use.

    • Optional strokeOptions: StrokeOptions

      (optional) Additional stroke options to use.

    Returns SVGElement

Private makeLineNode

  • makeLineNode(zA: XYCoords, zB: XYCoords, color: string, lineWidth?: number, strokeOptions?: StrokeOptions, classNameOverride?: string): SVGLineElement
  • Creates a basic node with start and end coordinates. The created node will not be bound to any root node.

    method

    makeLineNode

    instance
    memberof

    drawutilssvg

    Parameters

    • zA: XYCoords

      The line's start position.

    • zB: XYCoords

      The line's start position.

    • color: string

      The CSS color to draw the point with.

    • Optional lineWidth: number

      (optional) The line width to use.

    • Optional strokeOptions: StrokeOptions

      (optional) Additional stroke options to use.

    • Optional classNameOverride: string

      (optional) If nothing is passed the default classname 'path' will be used.

    Returns SVGLineElement

Private makeNode

  • makeNode(nodeName: string): SVGElement
  • Make a new SVG node (or recycle an old one) with the given node name (circle, path, line, rect, ...).

    This function is used in draw cycles to re-use old DOM nodes (in hope to boost performance).

    method

    makeNode

    instance
    memberof

    drawutilssvg

    Parameters

    • nodeName: string

      The node name.

    Returns SVGElement

    The new node, which is not yet added to any document.

Private makePathNode

  • makePathNode(pathString: string, color: string, lineWidth?: number, strokeOptions?: StrokeOptions, classNameOverride?: string): SVGPathElement
  • Creates a basic node with given path string data. The created node will not be bound to any root node.

    method

    makePathNode

    instance
    memberof

    drawutilssvg

    Parameters

    • pathString: string

      The path data (must be a valid path data string).

    • color: string

      The CSS color to draw the point with.

    • Optional lineWidth: number

      (optional) The line width to use.

    • Optional strokeOptions: StrokeOptions

      (optional) Additional stroke options to use.

    • Optional classNameOverride: string

      (optional) If nothing is passed the default classname 'path' will be used.

    Returns SVGPathElement

path

  • 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 } & StrokeOptions

    Returns SVGElement

    An instance representing the drawn path.

point

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

    method

    point

    instance
    memberof

    drawutilssvg

    Parameters

    • p: XYCoords

      The position to draw the point at.

    • color: string

      The CSS color to draw the point with.

    Returns SVGElement

polygon

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

    method

    polygon

    instance
    memberof

    drawutilssvg

    Parameters

    • polygon: Polygon

      The polygon to draw.

    • color: string

      The CSS color to draw the polygon with.

    • Optional lineWidth: number

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

    Returns SVGElement

polyline

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

    method

    polyline

    instance
    memberof

    drawutilssvg

    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.

    • Optional strokeOptions: StrokeOptions

      (optional) Stroke settings to use.

    Returns SVGElement

raster

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

    This works analogue to the grid() function

    method

    raster

    instance
    memberof

    drawutilssvg

    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 SVGElement

rect

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

    instance
    memberof

    drawutilssvg

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

    • Optional strokeOptions: StrokeOptions

      (optional) Stroke settings to use.

    Returns SVGElement

Private removeAllChildNodes

  • removeAllChildNodes(): 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 | null): void
  • This method shouled be called each time the currently drawn Drawable changes. Determine the class name for further usage here.

    name

    setCurrentClassName

    method
    instance
    memberof

    drawutilssvg

    Parameters

    • className: string | null

      A class name for further custom use cases.

    Returns void

setCurrentId

  • setCurrentId(uid: UID | null): 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
    instance
    memberof

    drawutilssvg

    Parameters

    • uid: UID | null

      A UID identifying the currently drawn element(s).

    Returns void

setSize

  • Sets the size and view box of the document. Call this if canvas size changes.

    method

    setSize

    instance
    memberof

    drawutilssvg

    Parameters

    Returns void

square

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

    drawutilssvg

    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 SVGElement

squareHandle

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

    drawutilssvg

    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 SVGElement

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"] }): SVGElement
  • 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 SVGElement

texturedPoly

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

    drawutilssvg

    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 SVGElement

Static copyPathData

  • Create a copy of the given path data. As path data only consists of strings and numbers, the copy will be shallow by definition.

    name

    copyPathData

    static
    memberof

    drawutilssvg

    Parameters

    Returns SVGPathParams

Static createSvg

  • createSvg(): SVGElement
  • Create a new and empty SVGElement <svg> in the svg-namespace.

    name

    createSvg

    static
    memberof

    drawutilssvg

    Returns SVGElement

    SVGElement

Static Private nodeSupportsLineDash

  • nodeSupportsLineDash(nodeName: string): boolean

Static transformPathData

  • Transform the given path data (translate and scale. rotating is not intended here).

    name

    transformPathData

    static
    memberof

    drawutilssvg

    Parameters

    • data: SVGPathParams

      The data to transform.

    • offset: XYCoords

      The translation offset (neutral is x=0, y=0).

    • scale: XYCoords

      The scale factors (neutral is x=1, y=1).

    Returns void

Legend

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

Generated using TypeDoc