Base class for all canvases. The following methods make up the public interface of the canvas 2D for all painting in mxGraph:
mxAbstractCanvas2D.arcTo is an additional method for drawing paths. This is a synthetic method, meaning that it is turned into a sequence of curves by default. Subclassers may add native support for arcs.
| mxXmlCanvas2D | Base class for all canvases. |
| Functions | |
| mxXmlCanvas2D | Constructs a new abstract canvas. |
| Variables | |
| root | Reference to the container for the SVG content. |
| textEnabled | Specifies if text output should be enabled. |
| compressed | Specifies if the output should be compressed by removing redundant calls. |
| Functions | |
| writeDefaults | |
| format | Returns a formatted number with 2 decimal places. |
| createElement | Creates the given element using the owner document of root. |
| save | Saves the drawing state. |
| restore | Restores the drawing state. |
| scale | Scales the output. |
| translate | Translates the output. |
| rotate | Rotates and/or flips the output around a given center. |
| setAlpha | Sets the current alpha. |
| setFillAlpha | Sets the current fill alpha. |
| setStrokeAlpha | Sets the current stroke alpha. |
| setFillColor | Sets the current fill color. |
| setGradient | Sets the gradient. |
| setStrokeColor | Sets the current stroke color. |
| setStrokeWidth | Sets the current stroke width. |
| setDashed | Enables or disables dashed lines. |
| setDashPattern | Sets the current dash pattern. |
| setLineCap | Sets the line cap. |
| setLineJoin | Sets the line join. |
| setMiterLimit | Sets the miter limit. |
| setFontColor | Sets the current font color. |
| setFontBackgroundColor | Sets the current font background color. |
| setFontBorderColor | Sets the current font border color. |
| setFontSize | Sets the current font size. |
| setFontFamily | Sets the current font family. |
| setFontStyle | Sets the current font style. |
| setShadow | Enables or disables shadows. |
| setShadowColor | Sets the current shadow color. |
| setShadowAlpha | Sets the current shadows alpha. |
| setShadowOffset | Sets the current shadow offset. |
| rect | Puts a rectangle into the drawing buffer. |
| roundrect | Puts a rounded rectangle into the drawing buffer. |
| ellipse | Puts an ellipse into the drawing buffer. |
| image | Paints an image. |
| begin | Starts a new path and puts it into the drawing buffer. |
| moveTo | Moves the current path the given point. |
| lineTo | Draws a line to the given coordinates. |
| quadTo | Adds a quadratic curve to the current path. |
| curveTo | Adds a bezier curve to the current path. |
| close | Closes the current path. |
| text | Paints the given text. |
| stroke | Paints the outline of the current drawing buffer. |
| fill | Fills the current drawing buffer. |
| fillAndStroke | Fills the current drawing buffer and its outline. |
mxXmlCanvas2D.prototype.writeDefaults = function()
mxXmlCanvas2D.prototype.createElement = function( name )
Creates the given element using the owner document of root.
mxXmlCanvas2D.prototype.rotate = function( theta, flipH, flipV, cx, cy )
Rotates and/or flips the output around a given center. (Note: Due to limitations in VML, the rotation cannot be concatenated.)
| theta | Number that represents the angle of the rotation (in degrees). |
| flipH | Boolean indicating if the output should be flipped horizontally. |
| flipV | Boolean indicating if the output should be flipped vertically. |
| cx | Number that represents the x-coordinate of the rotation center. |
| cy | Number that represents the y-coordinate of the rotation center. |
mxXmlCanvas2D.prototype.setGradient = function( color1, color2, x, y, w, h, direction, alpha1, alpha2 )
Sets the gradient. Note that the coordinates may be ignored by some implementations.
| color1 | Hexadecimal representation of the start color. |
| color2 | Hexadecimal representation of the end color. |
| x | X-coordinate of the gradient region. |
| y | y-coordinate of the gradient region. |
| w | Width of the gradient region. |
| h | Height of the gradient region. |
| direction | One of mxConstants.DIRECTION_NORTH, mxConstants.DIRECTION_EAST, mxConstants.DIRECTION_SOUTH or mxConstants.DIRECTION_WEST. |
| alpha1 | Optional alpha of the start color. Default is 1. Possible values are between 1 (opaque) and 0 (transparent). |
| alpha2 | Optional alpha of the end color. Default is 1. Possible values are between 1 (opaque) and 0 (transparent). |
mxXmlCanvas2D.prototype.setDashPattern = function( value )
Sets the current dash pattern. Default is ‘3 3’.
| value | String that represents the dash pattern, which is a sequence of numbers defining the length of the dashes and the length of the spaces |
| between the dashes. The lengths are relative to the line width | a length of 1 is equals to the line width. |
mxXmlCanvas2D.prototype.setFontSize = function( value )
Sets the current font size. Default is mxConstants.DEFAULT_FONTSIZE.
| value | Numeric representation of the font size. |
mxXmlCanvas2D.prototype.setFontFamily = function( value )
Sets the current font family. Default is mxConstants.DEFAULT_FONTFAMILY.
| value | String representation of the font family. This handles the same values as the CSS font-family property. |
mxXmlCanvas2D.prototype.setFontStyle = function( value )
Sets the current font style.
| value | Numeric representation of the font family. This is the sum of the font styles from mxConstants. |
mxXmlCanvas2D.prototype.setShadowColor = function( value )
Sets the current shadow color. Default is mxConstants.SHADOWCOLOR.
| value | Hexadecimal representation of the color or ‘none’. |
mxXmlCanvas2D.prototype.setShadowAlpha = function( value )
Sets the current shadows alpha. Default is mxConstants.SHADOW_OPACITY.
| value | Number that represents the new alpha. Possible values are between 1 (opaque) and 0 (transparent). |
mxXmlCanvas2D.prototype.rect = function( x, y, w, h )
Puts a rectangle into the drawing buffer.
| x | Number that represents the x-coordinate of the rectangle. |
| y | Number that represents the y-coordinate of the rectangle. |
| w | Number that represents the width of the rectangle. |
| h | Number that represents the height of the rectangle. |
mxXmlCanvas2D.prototype.roundrect = function( x, y, w, h, dx, dy )
Puts a rounded rectangle into the drawing buffer.
| x | Number that represents the x-coordinate of the rectangle. |
| y | Number that represents the y-coordinate of the rectangle. |
| w | Number that represents the width of the rectangle. |
| h | Number that represents the height of the rectangle. |
| dx | Number that represents the horizontal rounding. |
| dy | Number that represents the vertical rounding. |
mxXmlCanvas2D.prototype.ellipse = function( x, y, w, h )
Puts an ellipse into the drawing buffer.
| x | Number that represents the x-coordinate of the ellipse. |
| y | Number that represents the y-coordinate of the ellipse. |
| w | Number that represents the width of the ellipse. |
| h | Number that represents the height of the ellipse. |
mxXmlCanvas2D.prototype.image = function( x, y, w, h, src, aspect, flipH, flipV )
Paints an image.
| x | Number that represents the x-coordinate of the image. |
| y | Number that represents the y-coordinate of the image. |
| w | Number that represents the width of the image. |
| h | Number that represents the height of the image. |
| src | String that specifies the URL of the image. |
| aspect | Boolean indicating if the aspect of the image should be preserved. |
| flipH | Boolean indicating if the image should be flipped horizontally. |
| flipV | Boolean indicating if the image should be flipped vertically. |
mxXmlCanvas2D.prototype.quadTo = function( x1, y1, x2, y2 )
Adds a quadratic curve to the current path.
| x1 | Number that represents the x-coordinate of the control point. |
| y1 | Number that represents the y-coordinate of the control point. |
| x2 | Number that represents the x-coordinate of the endpoint. |
| y2 | Number that represents the y-coordinate of the endpoint. |
mxXmlCanvas2D.prototype.curveTo = function( x1, y1, x2, y2, x3, y3 )
Adds a bezier curve to the current path.
| x1 | Number that represents the x-coordinate of the first control point. |
| y1 | Number that represents the y-coordinate of the first control point. |
| x2 | Number that represents the x-coordinate of the second control point. |
| y2 | Number that represents the y-coordinate of the second control point. |
| x3 | Number that represents the x-coordinate of the endpoint. |
| y3 | Number that represents the y-coordinate of the endpoint. |
mxXmlCanvas2D.prototype.text = function( x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir )
Paints the given text. Possible values for format are empty string for plain text and html for HTML markup. Background and border color as well as clipping is not available in plain text labels for VML. HTML labels are not available as part of shapes with no foreignObject support in SVG (eg. IE9, IE10).
| x | Number that represents the x-coordinate of the text. |
| y | Number that represents the y-coordinate of the text. |
| w | Number that represents the available width for the text or 0 for automatic width. |
| h | Number that represents the available height for the text or 0 for automatic height. |
| str | String that specifies the text to be painted. |
| align | String that represents the horizontal alignment. |
| valign | String that represents the vertical alignment. |
| wrap | Boolean that specifies if word-wrapping is enabled. Requires w > 0. |
| format | Empty string for plain text or ‘html’ for HTML markup. |
| overflow | Specifies the overflow behaviour of the label. Requires w > 0 and/or h > 0. |
| clip | Boolean that specifies if the label should be clipped. Requires w > 0 and/or h > 0. |
| rotation | Number that specifies the angle of the rotation around the anchor point of the text. |
| dir | Optional string that specifies the text direction. Possible values are rtl and lrt. |
Constructs a new abstract canvas.
function mxXmlCanvas2D( root )
Reference to the container for the SVG content.
this.root
Specifies if text output should be enabled.
mxXmlCanvas2D.prototype.textEnabled
Specifies if the output should be compressed by removing redundant calls.
mxXmlCanvas2D.prototype.compressed
mxXmlCanvas2D.prototype.writeDefaults = function()
Returns a formatted number with 2 decimal places.
mxXmlCanvas2D.prototype.format = function( value )
Creates the given element using the owner document of root.
mxXmlCanvas2D.prototype.createElement = function( name )
Saves the drawing state.
mxXmlCanvas2D.prototype.save = function()
Restores the drawing state.
mxXmlCanvas2D.prototype.restore = function()
Scales the output.
mxXmlCanvas2D.prototype.scale = function( value )
Translates the output.
mxXmlCanvas2D.prototype.translate = function( dx, dy )
Rotates and/or flips the output around a given center.
mxXmlCanvas2D.prototype.rotate = function( theta, flipH, flipV, cx, cy )
Sets the current alpha.
mxXmlCanvas2D.prototype.setAlpha = function( value )
Sets the current fill alpha.
mxXmlCanvas2D.prototype.setFillAlpha = function( value )
Sets the current stroke alpha.
mxXmlCanvas2D.prototype.setStrokeAlpha = function( value )
Sets the current fill color.
mxXmlCanvas2D.prototype.setFillColor = function( value )
Sets the gradient.
mxXmlCanvas2D.prototype.setGradient = function( color1, color2, x, y, w, h, direction, alpha1, alpha2 )
Sets the current stroke color.
mxXmlCanvas2D.prototype.setStrokeColor = function( value )
Sets the current stroke width.
mxXmlCanvas2D.prototype.setStrokeWidth = function( value )
Enables or disables dashed lines.
mxXmlCanvas2D.prototype.setDashed = function( value )
Sets the current dash pattern.
mxXmlCanvas2D.prototype.setDashPattern = function( value )
Sets the line cap.
mxXmlCanvas2D.prototype.setLineCap = function( value )
Sets the line join.
mxXmlCanvas2D.prototype.setLineJoin = function( value )
Sets the miter limit.
mxXmlCanvas2D.prototype.setMiterLimit = function( value )
Sets the current font color.
mxXmlCanvas2D.prototype.setFontColor = function( value )
Sets the current font background color.
mxXmlCanvas2D.prototype.setFontBackgroundColor = function( value )
Sets the current font border color.
mxXmlCanvas2D.prototype.setFontBorderColor = function( value )
Sets the current font size.
mxXmlCanvas2D.prototype.setFontSize = function( value )
Sets the current font family.
mxXmlCanvas2D.prototype.setFontFamily = function( value )
Sets the current font style.
mxXmlCanvas2D.prototype.setFontStyle = function( value )
Enables or disables shadows.
mxXmlCanvas2D.prototype.setShadow = function( value )
Sets the current shadow color.
mxXmlCanvas2D.prototype.setShadowColor = function( value )
Sets the current shadows alpha.
mxXmlCanvas2D.prototype.setShadowAlpha = function( value )
Sets the current shadow offset.
mxXmlCanvas2D.prototype.setShadowOffset = function( dx, dy )
Puts a rectangle into the drawing buffer.
mxXmlCanvas2D.prototype.rect = function( x, y, w, h )
Puts a rounded rectangle into the drawing buffer.
mxXmlCanvas2D.prototype.roundrect = function( x, y, w, h, dx, dy )
Puts an ellipse into the drawing buffer.
mxXmlCanvas2D.prototype.ellipse = function( x, y, w, h )
Paints an image.
mxXmlCanvas2D.prototype.image = function( x, y, w, h, src, aspect, flipH, flipV )
Starts a new path and puts it into the drawing buffer.
mxXmlCanvas2D.prototype.begin = function()
Moves the current path the given point.
mxXmlCanvas2D.prototype.moveTo = function( x, y )
Draws a line to the given coordinates.
mxXmlCanvas2D.prototype.lineTo = function( x, y )
Adds a quadratic curve to the current path.
mxXmlCanvas2D.prototype.quadTo = function( x1, y1, x2, y2 )
Adds a bezier curve to the current path.
mxXmlCanvas2D.prototype.curveTo = function( x1, y1, x2, y2, x3, y3 )
Closes the current path.
mxXmlCanvas2D.prototype.close = function()
Paints the given text.
mxXmlCanvas2D.prototype.text = function( x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir )
Paints the outline of the current drawing buffer.
mxXmlCanvas2D.prototype.stroke = function()
Fills the current drawing buffer.
mxXmlCanvas2D.prototype.fill = function()
Fills the current drawing buffer and its outline.
mxXmlCanvas2D.prototype.fillAndStroke = function()
Adds the given arc to the current path.
mxAbstractCanvas2D.prototype.arcTo = function( rx, ry, angle, largeArcFlag, sweepFlag, x, y )
Constant for direction north.
DIRECTION_NORTH: 'north'
Constant for direction east.
DIRECTION_EAST: 'east'
Constant for direction south.
DIRECTION_SOUTH: 'south'
Constant for direction west.
DIRECTION_WEST: 'west'
Defines the default size (in px).
DEFAULT_FONTSIZE: 11
Defines the default family for all fonts.
DEFAULT_FONTFAMILY: 'Arial
Defines the color to be used to draw shadows in shapes and windows.
SHADOWCOLOR: 'gray'
Defines the opacity for shadows.
SHADOW_OPACITY: 1