The constructor.
The SVG node to use.
The draw offset to use.
The scale factors to use.
The initial canvas size (use setSize to change).
Indicates if the constructed drawutils should fill all drawn shapes (if possible).
The default draw config to use for CSS fallback styles.
(optional) Indicates if this is the primary or secondary instance. Only primary instances manage child nodes.
(optional) Primary and seconday instances share the same <g> node.
To avoid flickering the lib draws on a buffer, which is replacing the old
The buffered nodeDefs.
The SVG element cache. On clear() all elements are kept for possible re-use on next draw cycle.
The current drawable-classname.
The current drawable-ID. This can be any unique ID identifying the following drawn element.
The current drawlib configuration to be used for all upcoming draw operations.
The root elements container
Indicates if this library is the primary or seconday instance (draw an fill share the same DOM nodes).
A style node of type <defs>
.
A style node of type <style>
.
Add custom CSS class names and the globally defined CSS classname to the given node.
The SVG node to bind.
The additional custom classname to add.
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.
The node to draw/fill and bind.
The class name(s) to use.
A stroke/fill color to use.
(optional) A line width to use for drawing (default is 1).
The node itself (for chaining).
Bind this given node to a parent. If no parent is passed then the global node buffer will be used.
The SVG node to bind.
(optional) You may pass node other than the glober buffer node.
The passed node itself.
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"
Adds the internal
Adds a default style defintion based on the passed DrawConfig. Twaek the draw config to change default colors or line thicknesses.
A private helper method to apply stroke options to the current context.
-
Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
The start point of the arrow-line.
The end point of the arrow-line.
Any valid CSS color string.
(optional) The line width to use; default is 1.
(optional) The length of the arrow head (default is 8 units).
(optional) Stroke settings to use.
Draw just an arrow head a the end of an imaginary line (zB) of the given line width the specified (CSS-) color and size.
The start point of the arrow-line.
The end point of the arrow-line.
Any valid CSS color string.
(optional) The line width to use; default is 1.
(optional) The length of the arrow head (default is 8 pixels).
(optional) Stroke settings to use.
Called before each draw cycle. This is required for compatibility with other draw classes in the library.
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.
The center of the circle.
The radius of the circle.
The CSS color to draw the circle with.
(optional) The line width to use; default is 1.
(optional) Stroke settings to use.
Draw a circular arc (section of a circle) with the given CSS color.
The center of the circle.
The radius of the circle.
The angle to start at.
The angle to end at.
The CSS color to draw the circle with.
(optional) Stroke settings to use.
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.
The center of the circle.
The radius of the circle.
The CSS color to draw the circle with.
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.
The color to clear with.
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.
Create a new DOM node <svg> in the SVG namespace.
The node name (tag-name).
A new element in the SVG namespace with the given node name.
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.
The center of the crosshair.
The radius of the crosshair.
The CSS color to draw the crosshair with.
(optional, default=1.0) The line width to use.
Draw a crosshair with given radius and color at the given position.
Note that the crosshair radius will not be affected by scaling.
The center of the crosshair.
The radius of the crosshair.
The CSS color to draw the crosshair with.
(optional, default=0.5) The line width to use.
Draw the given (cubic) bézier curve.
The start point of the cubic Bézier curve
The end point the cubic Bézier curve.
The start control point the cubic Bézier curve.
The end control point the cubic Bézier curve.
The CSS color to draw the curve with.
(optional) The line width to use.
(optional) Stroke settings to use.
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.
The start point of the cubic Bézier curve
The end point the cubic Bézier curve.
The start control point the cubic Bézier curve.
The end control point the cubic Bézier curve.
The CSS color to draw the curve with.
(optional) The line width to use.
(optional) The length of the arrow head (default is 8 units).
(optional) Stroke settings to use.
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 ]
The cubic bezier path as described above.
The CSS colot to draw the path with.
(optional) The line width to use.
(optional) Stroke settings to use.
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.
The center of the diamond.
The x/y-size of the diamond.
The CSS color to draw the diamond with.
Draw a 1x1 dot with the specified (CSS-) color.
The position to draw the dot at.
The CSS color to draw the dot with.
Draw an ellipse with the specified (CSS-) color and thw two radii.
The center of the ellipse.
The radius of the ellipse.
The radius of the ellipse.
The CSS color to draw the ellipse with.
(optional) The line width to use; default is 1.
(optional, default=0) The rotation of the ellipse.
(optional) Stroke settings to use.
Called after each draw cycle.
This is required for compatibility with other draw classes in the library (like drawgl).
Retieve an old (cached) element. Only if both – key and nodeName – match, the element will be returned (null otherwise).
The key of the desired element (used when re-drawing).
The expected node name.
Draw a grid of horizontal and vertical lines with the given (CSS-) color.
The center of the grid.
The total width of the grid (width/2 each to the left and to the right).
The total height of the grid (height/2 each to the top and to the bottom).
The horizontal grid size.
The vertical grid size.
The CSS color to draw the grid with.
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.
The image object to draw.
The position to draw the the upper left corner at.
The x/y-size to draw the image with.
(optional, default=0.0) The transparency (1.0=opaque, 0.0=transparent).
Draw a non-scaling text label at the given position.
The text to draw.
The x-position to draw the text at.
The y-position to draw the text at.
The (optional) rotation in radians.
The color to use (default is black).
Draw the line between the given two points with the specified (CSS-) color.
The start point of the line.
The end point of the line.
Any valid CSS color string.
(optional) Stroke settings to use.
Creates a basic arrow head node (
The CSS color to draw the point with.
(optional) The line width to use.
(optional) The length of the arrow head; if none is specified then the head will be 8 absolute units long.
(optional) Additional stroke options to use.
(optional) If not null, then this position will contain the arrow head's start point (after execution). Some sort of OUT variable.
Creates a basic cubic Bézier path node (
The start point of the cubic Bézier curve
The end point the cubic Bézier curve.
The start control point the cubic Bézier curve.
The end control point the cubic Bézier curve.
The CSS color to draw the point with.
(optional) The line width to use.
(optional) Additional stroke options to use.
Creates a basic
The line's start position.
The line's start position.
The CSS color to draw the point with.
(optional) The line width to use.
(optional) Additional stroke options to use.
(optional) If nothing is passed the default classname 'path' will be used.
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).
The node name.
The new node, which is not yet added to any document.
Creates a basic
The path data (must be a valid path data string).
The CSS color to draw the point with.
(optional) The line width to use.
(optional) Additional stroke options to use.
(optional) If nothing is passed the default classname 'path' will be used.
Draw an SVG-like path given by the specified path data.
An array of path commands and params.
(optional) The color to draw this path with (default is null).
(optional) the line width to use (default is 1).
An instance representing the drawn path.
Draw the given point with the specified (CSS-) color and radius 3.
The position to draw the point at.
The CSS color to draw the point with.
Draw a polygon.
The polygon to draw.
The CSS color to draw the polygon with.
(optional) The line width to use; default is 1.
Draw a polygon line (alternative function to the polygon).
The polygon vertices to draw.
If true the polyline will not be closed at its end.
The CSS color to draw the polygon with.
(optional) The line width to use; default is 1.
(optional) Stroke settings to use.
Draw a raster of crosshairs in the given grid.
This works analogue to the grid() function
The center of the raster.
The total width of the raster (width/2 each to the left and to the right).
The total height of the raster (height/2 each to the top and to the bottom).
The horizontal raster size.
The vertical raster size.
The CSS color to draw the raster with.
Draw a rectangle.
The upper left corner of the rectangle.
The width of the rectangle.
The height of the rectangle.
The color to use.
(optional) The line with to use (default is 1).
(optional) Stroke settings to use.
A private helper function to clear all SVG nodes from the >g> node.
Set the current drawlib configuration.
The new configuration settings to use for the next render methods.
This method shouled be called each time the currently drawn Drawable
changes.
Determine the class name for further usage here.
A class name for further custom use cases.
This method shouled be called each time the currently drawn Drawable
changes.
It is used by some libraries for identifying elemente on re-renders.
A UID identifying the currently drawn element(s).
Sets the size and view box of the document. Call this if canvas size changes.
The new canvas size.
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.
The center of the square.
The size of the square.
The CSS color to draw the square with.
(optional) The line width to use; default is 1.
(optional) Stroke settings to use.
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.
The center of the square.
The x/y-size of the square.
The CSS color to draw the square with.
Draw a text at the given relative position.
The text to draw.
The x-position to draw the text at.
The y-position to draw the text at.
The Color to use.
The font family to use.
The font size (in pixels) to use.
The font style to use.
The font weight to use.
The line height (in pixels) to use.
The (optional) rotation in radians.
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"
.
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.
The image object to draw.
The texture size to use; these are the original bounds to map the polygon vertices to.
The polygon to use as clip path.
The polygon's position (relative), measured at the bounding box's center.
The rotation to use for the polygon (and for the texture).
Create a copy of the given path data. As path data only consists of strings and numbers, the copy will be shallow by definition.
Create a new and empty SVGElement
<svg> in the svg-namespace.
SVGElement
Transform the given path data (translate and scale. rotating is not intended here).
The data to transform.
The translation offset (neutral is x=0, y=0).
The scale factors (neutral is x=1, y=1).
Generated using TypeDoc
A helper class for basic SVG drawing operations. This class should be compatible to the default 'draw' class.
CubicBzierCurvce
Polygon
Vertex
XYCoords