mxXmlCanvas2D

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.

Summary
mxXmlCanvas2DBase class for all canvases.
Functions
mxXmlCanvas2DConstructs a new abstract canvas.
Variables
rootReference to the container for the SVG content.
textEnabledSpecifies if text output should be enabled.
compressedSpecifies if the output should be compressed by removing redundant calls.
Functions
writeDefaults
formatReturns a formatted number with 2 decimal places.
createElementCreates the given element using the owner document of root.
saveSaves the drawing state.
restoreRestores the drawing state.
scaleScales the output.
translateTranslates the output.
rotateRotates and/or flips the output around a given center.
setAlphaSets the current alpha.
setFillAlphaSets the current fill alpha.
setStrokeAlphaSets the current stroke alpha.
setFillColorSets the current fill color.
setGradientSets the gradient.
setStrokeColorSets the current stroke color.
setStrokeWidthSets the current stroke width.
setDashedEnables or disables dashed lines.
setDashPatternSets the current dash pattern.
setLineCapSets the line cap.
setLineJoinSets the line join.
setMiterLimitSets the miter limit.
setFontColorSets the current font color.
setFontBackgroundColorSets the current font background color.
setFontBorderColorSets the current font border color.
setFontSizeSets the current font size.
setFontFamilySets the current font family.
setFontStyleSets the current font style.
setShadowEnables or disables shadows.
setShadowColorSets the current shadow color.
setShadowAlphaSets the current shadows alpha.
setShadowOffsetSets the current shadow offset.
rectPuts a rectangle into the drawing buffer.
roundrectPuts a rounded rectangle into the drawing buffer.
ellipsePuts an ellipse into the drawing buffer.
imagePaints an image.
beginStarts a new path and puts it into the drawing buffer.
moveToMoves the current path the given point.
lineToDraws a line to the given coordinates.
quadToAdds a quadratic curve to the current path.
curveToAdds a bezier curve to the current path.
closeCloses the current path.
textPaints the given text.
strokePaints the outline of the current drawing buffer.
fillFills the current drawing buffer.
fillAndStrokeFills the current drawing buffer and its outline.

Functions

mxXmlCanvas2D

function mxXmlCanvas2D(root)

Constructs a new abstract canvas.

Variables

root

this.root

Reference to the container for the SVG content.

textEnabled

mxXmlCanvas2D.prototype.textEnabled

Specifies if text output should be enabled.  Default is true.

compressed

mxXmlCanvas2D.prototype.compressed

Specifies if the output should be compressed by removing redundant calls.  Default is true.

Functions

writeDefaults

mxXmlCanvas2D.prototype.writeDefaults = function()

Writes the rendering defaults to root

format

mxXmlCanvas2D.prototype.format = function(value)

Returns a formatted number with 2 decimal places.

createElement

mxXmlCanvas2D.prototype.createElement = function(name)

Creates the given element using the owner document of root.

save

mxXmlCanvas2D.prototype.save = function()

Saves the drawing state.

restore

mxXmlCanvas2D.prototype.restore = function()

Restores the drawing state.

scale

mxXmlCanvas2D.prototype.scale = function(value)

Scales the output.

Parameters

scaleNumber that represents the scale where 1 is equal to 100%.

translate

mxXmlCanvas2D.prototype.translate = function(dx,
dy)

Translates the output.

Parameters

dxNumber that specifies the horizontal translation.
dyNumber that specifies the vertical translation.

rotate

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

Parameters

thetaNumber that represents the angle of the rotation (in degrees).
flipHBoolean indicating if the output should be flipped horizontally.
flipVBoolean indicating if the output should be flipped vertically.
cxNumber that represents the x-coordinate of the rotation center.
cyNumber that represents the y-coordinate of the rotation center.

setAlpha

mxXmlCanvas2D.prototype.setAlpha = function(value)

Sets the current alpha.

Parameters

valueNumber that represents the new alpha.  Possible values are between 1 (opaque) and 0 (transparent).

setFillAlpha

mxXmlCanvas2D.prototype.setFillAlpha = function(value)

Sets the current fill alpha.

Parameters

valueNumber that represents the new fill alpha.  Possible values are between 1 (opaque) and 0 (transparent).

setStrokeAlpha

mxXmlCanvas2D.prototype.setStrokeAlpha = function(value)

Sets the current stroke alpha.

Parameters

valueNumber that represents the new stroke alpha.  Possible values are between 1 (opaque) and 0 (transparent).

setFillColor

mxXmlCanvas2D.prototype.setFillColor = function(value)

Sets the current fill color.

Parameters

valueHexadecimal representation of the color or ‘none’.

setGradient

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.

Parameters

color1Hexadecimal representation of the start color.
color2Hexadecimal representation of the end color.
xX-coordinate of the gradient region.
yy-coordinate of the gradient region.
wWidth of the gradient region.
hHeight of the gradient region.
directionOne of mxConstants.DIRECTION_NORTH, mxConstants.DIRECTION_EAST, mxConstants.DIRECTION_SOUTH or mxConstants.DIRECTION_WEST.
alpha1Optional alpha of the start color.  Default is 1.  Possible values are between 1 (opaque) and 0 (transparent).
alpha2Optional alpha of the end color.  Default is 1.  Possible values are between 1 (opaque) and 0 (transparent).

setStrokeColor

mxXmlCanvas2D.prototype.setStrokeColor = function(value)

Sets the current stroke color.

Parameters

valueHexadecimal representation of the color or ‘none’.

setStrokeWidth

mxXmlCanvas2D.prototype.setStrokeWidth = function(value)

Sets the current stroke width.

Parameters

valueNumeric representation of the stroke width.

setDashed

mxXmlCanvas2D.prototype.setDashed = function(value,
fixDash)

Enables or disables dashed lines.

Parameters

valueBoolean that specifies if dashed lines should be enabled.
valueBoolean that specifies if the stroke width should be ignored for the dash pattern.  Default is false.

setDashPattern

mxXmlCanvas2D.prototype.setDashPattern = function(value)

Sets the current dash pattern.  Default is ‘3 3’.

Parameters

valueString 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 widtha length of 1 is equals to the line width.

setLineCap

mxXmlCanvas2D.prototype.setLineCap = function(value)

Sets the line cap.  Default is ‘flat’ which corresponds to ‘butt’ in SVG.

Parameters

valueString that represents the line cap.  Possible values are flat, round and square.

setLineJoin

mxXmlCanvas2D.prototype.setLineJoin = function(value)

Sets the line join.  Default is ‘miter’.

Parameters

valueString that represents the line join.  Possible values are miter, round and bevel.

setMiterLimit

mxXmlCanvas2D.prototype.setMiterLimit = function(value)

Sets the miter limit.  Default is 10.

Parameters

valueNumber that represents the miter limit.

setFontColor

mxXmlCanvas2D.prototype.setFontColor = function(value)

Sets the current font color.  Default is ‘#000000’.

Parameters

valueHexadecimal representation of the color or ‘none’.

setFontBackgroundColor

mxXmlCanvas2D.prototype.setFontBackgroundColor = function(value)

Sets the current font background color.

Parameters

valueHexadecimal representation of the color or ‘none’.

setFontBorderColor

mxXmlCanvas2D.prototype.setFontBorderColor = function(value)

Sets the current font border color.

Parameters

valueHexadecimal representation of the color or ‘none’.

setFontSize

mxXmlCanvas2D.prototype.setFontSize = function(value)

Sets the current font size.  Default is mxConstants.DEFAULT_FONTSIZE.

Parameters

valueNumeric representation of the font size.

setFontFamily

mxXmlCanvas2D.prototype.setFontFamily = function(value)

Sets the current font family.  Default is mxConstants.DEFAULT_FONTFAMILY.

Parameters

valueString representation of the font family.  This handles the same values as the CSS font-family property.

setFontStyle

mxXmlCanvas2D.prototype.setFontStyle = function(value)

Sets the current font style.

Parameters

valueNumeric representation of the font family.  This is the sum of the font styles from mxConstants.

setShadow

mxXmlCanvas2D.prototype.setShadow = function(value)

Enables or disables shadows.

Parameters

valueBoolean that specifies if shadows should be enabled.

setShadowColor

mxXmlCanvas2D.prototype.setShadowColor = function(value)

Sets the current shadow color.  Default is mxConstants.SHADOWCOLOR.

Parameters

valueHexadecimal representation of the color or ‘none’.

setShadowAlpha

mxXmlCanvas2D.prototype.setShadowAlpha = function(value)

Sets the current shadows alpha.  Default is mxConstants.SHADOW_OPACITY.

Parameters

valueNumber that represents the new alpha.  Possible values are between 1 (opaque) and 0 (transparent).

setShadowOffset

mxXmlCanvas2D.prototype.setShadowOffset = function(dx,
dy)

Sets the current shadow offset.

Parameters

dxNumber that represents the horizontal offset of the shadow.
dyNumber that represents the vertical offset of the shadow.

rect

mxXmlCanvas2D.prototype.rect = function(x,
y,
w,
h)

Puts a rectangle into the drawing buffer.

Parameters

xNumber that represents the x-coordinate of the rectangle.
yNumber that represents the y-coordinate of the rectangle.
wNumber that represents the width of the rectangle.
hNumber that represents the height of the rectangle.

roundrect

mxXmlCanvas2D.prototype.roundrect = function(x,
y,
w,
h,
dx,
dy)

Puts a rounded rectangle into the drawing buffer.

Parameters

xNumber that represents the x-coordinate of the rectangle.
yNumber that represents the y-coordinate of the rectangle.
wNumber that represents the width of the rectangle.
hNumber that represents the height of the rectangle.
dxNumber that represents the horizontal rounding.
dyNumber that represents the vertical rounding.

ellipse

mxXmlCanvas2D.prototype.ellipse = function(x,
y,
w,
h)

Puts an ellipse into the drawing buffer.

Parameters

xNumber that represents the x-coordinate of the ellipse.
yNumber that represents the y-coordinate of the ellipse.
wNumber that represents the width of the ellipse.
hNumber that represents the height of the ellipse.

image

mxXmlCanvas2D.prototype.image = function(x,
y,
w,
h,
src,
aspect,
flipH,
flipV)

Paints an image.

Parameters

xNumber that represents the x-coordinate of the image.
yNumber that represents the y-coordinate of the image.
wNumber that represents the width of the image.
hNumber that represents the height of the image.
srcString that specifies the URL of the image.
aspectBoolean indicating if the aspect of the image should be preserved.
flipHBoolean indicating if the image should be flipped horizontally.
flipVBoolean indicating if the image should be flipped vertically.

begin

mxXmlCanvas2D.prototype.begin = function()

Starts a new path and puts it into the drawing buffer.

moveTo

mxXmlCanvas2D.prototype.moveTo = function(x,
y)

Moves the current path the given point.

Parameters

xNumber that represents the x-coordinate of the point.
yNumber that represents the y-coordinate of the point.

lineTo

mxXmlCanvas2D.prototype.lineTo = function(x,
y)

Draws a line to the given coordinates.

Parameters

xNumber that represents the x-coordinate of the endpoint.
yNumber that represents the y-coordinate of the endpoint.

quadTo

mxXmlCanvas2D.prototype.quadTo = function(x1,
y1,
x2,
y2)

Adds a quadratic curve to the current path.

Parameters

x1Number that represents the x-coordinate of the control point.
y1Number that represents the y-coordinate of the control point.
x2Number that represents the x-coordinate of the endpoint.
y2Number that represents the y-coordinate of the endpoint.

curveTo

mxXmlCanvas2D.prototype.curveTo = function(x1,
y1,
x2,
y2,
x3,
y3)

Adds a bezier curve to the current path.

Parameters

x1Number that represents the x-coordinate of the first control point.
y1Number that represents the y-coordinate of the first control point.
x2Number that represents the x-coordinate of the second control point.
y2Number that represents the y-coordinate of the second control point.
x3Number that represents the x-coordinate of the endpoint.
y3Number that represents the y-coordinate of the endpoint.

close

mxXmlCanvas2D.prototype.close = function()

Closes the current path.

text

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

Parameters

xNumber that represents the x-coordinate of the text.
yNumber that represents the y-coordinate of the text.
wNumber that represents the available width for the text or 0 for automatic width.
hNumber that represents the available height for the text or 0 for automatic height.
strString that specifies the text to be painted.
alignString that represents the horizontal alignment.
valignString that represents the vertical alignment.
wrapBoolean that specifies if word-wrapping is enabled.  Requires w > 0.
formatEmpty string for plain text or ‘html’ for HTML markup.
overflowSpecifies the overflow behaviour of the label.  Requires w > 0 and/or h > 0.
clipBoolean that specifies if the label should be clipped.  Requires w > 0 and/or h > 0.
rotationNumber that specifies the angle of the rotation around the anchor point of the text.
dirOptional string that specifies the text direction.  Possible values are rtl and lrt.

stroke

mxXmlCanvas2D.prototype.stroke = function()

Paints the outline of the current drawing buffer.

fill

mxXmlCanvas2D.prototype.fill = function()

Fills the current drawing buffer.

fillAndStroke

mxXmlCanvas2D.prototype.fillAndStroke = function()

Fills the current drawing buffer and its outline.

function mxXmlCanvas2D(root)
Constructs a new abstract canvas.
this.root
Reference to the container for the SVG content.
mxXmlCanvas2D.prototype.textEnabled
Specifies if text output should be enabled.
mxXmlCanvas2D.prototype.compressed
Specifies if the output should be compressed by removing redundant calls.
mxXmlCanvas2D.prototype.writeDefaults = function()
mxXmlCanvas2D.prototype.format = function(value)
Returns a formatted number with 2 decimal places.
mxXmlCanvas2D.prototype.createElement = function(name)
Creates the given element using the owner document of root.
mxXmlCanvas2D.prototype.save = function()
Saves the drawing state.
mxXmlCanvas2D.prototype.restore = function()
Restores the drawing state.
mxXmlCanvas2D.prototype.scale = function(value)
Scales the output.
mxXmlCanvas2D.prototype.translate = function(dx,
dy)
Translates the output.
mxXmlCanvas2D.prototype.rotate = function(theta,
flipH,
flipV,
cx,
cy)
Rotates and/or flips the output around a given center.
mxXmlCanvas2D.prototype.setAlpha = function(value)
Sets the current alpha.
mxXmlCanvas2D.prototype.setFillAlpha = function(value)
Sets the current fill alpha.
mxXmlCanvas2D.prototype.setStrokeAlpha = function(value)
Sets the current stroke alpha.
mxXmlCanvas2D.prototype.setFillColor = function(value)
Sets the current fill color.
mxXmlCanvas2D.prototype.setGradient = function(color1,
color2,
x,
y,
w,
h,
direction,
alpha1,
alpha2)
Sets the gradient.
mxXmlCanvas2D.prototype.setStrokeColor = function(value)
Sets the current stroke color.
mxXmlCanvas2D.prototype.setStrokeWidth = function(value)
Sets the current stroke width.
mxXmlCanvas2D.prototype.setDashed = function(value,
fixDash)
Enables or disables dashed lines.
mxXmlCanvas2D.prototype.setDashPattern = function(value)
Sets the current dash pattern.
mxXmlCanvas2D.prototype.setLineCap = function(value)
Sets the line cap.
mxXmlCanvas2D.prototype.setLineJoin = function(value)
Sets the line join.
mxXmlCanvas2D.prototype.setMiterLimit = function(value)
Sets the miter limit.
mxXmlCanvas2D.prototype.setFontColor = function(value)
Sets the current font color.
mxXmlCanvas2D.prototype.setFontBackgroundColor = function(value)
Sets the current font background color.
mxXmlCanvas2D.prototype.setFontBorderColor = function(value)
Sets the current font border color.
mxXmlCanvas2D.prototype.setFontSize = function(value)
Sets the current font size.
mxXmlCanvas2D.prototype.setFontFamily = function(value)
Sets the current font family.
mxXmlCanvas2D.prototype.setFontStyle = function(value)
Sets the current font style.
mxXmlCanvas2D.prototype.setShadow = function(value)
Enables or disables shadows.
mxXmlCanvas2D.prototype.setShadowColor = function(value)
Sets the current shadow color.
mxXmlCanvas2D.prototype.setShadowAlpha = function(value)
Sets the current shadows alpha.
mxXmlCanvas2D.prototype.setShadowOffset = function(dx,
dy)
Sets the current shadow offset.
mxXmlCanvas2D.prototype.rect = function(x,
y,
w,
h)
Puts a rectangle into the drawing buffer.
mxXmlCanvas2D.prototype.roundrect = function(x,
y,
w,
h,
dx,
dy)
Puts a rounded rectangle into the drawing buffer.
mxXmlCanvas2D.prototype.ellipse = function(x,
y,
w,
h)
Puts an ellipse into the drawing buffer.
mxXmlCanvas2D.prototype.image = function(x,
y,
w,
h,
src,
aspect,
flipH,
flipV)
Paints an image.
mxXmlCanvas2D.prototype.begin = function()
Starts a new path and puts it into the drawing buffer.
mxXmlCanvas2D.prototype.moveTo = function(x,
y)
Moves the current path the given point.
mxXmlCanvas2D.prototype.lineTo = function(x,
y)
Draws a line to the given coordinates.
mxXmlCanvas2D.prototype.quadTo = function(x1,
y1,
x2,
y2)
Adds a quadratic curve to the current path.
mxXmlCanvas2D.prototype.curveTo = function(x1,
y1,
x2,
y2,
x3,
y3)
Adds a bezier curve to the current path.
mxXmlCanvas2D.prototype.close = function()
Closes the current path.
mxXmlCanvas2D.prototype.text = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation,
dir)
Paints the given text.
mxXmlCanvas2D.prototype.stroke = function()
Paints the outline of the current drawing buffer.
mxXmlCanvas2D.prototype.fill = function()
Fills the current drawing buffer.
mxXmlCanvas2D.prototype.fillAndStroke = function()
Fills the current drawing buffer and its outline.
mxAbstractCanvas2D.prototype.arcTo = function(rx,
ry,
angle,
largeArcFlag,
sweepFlag,
x,
y)
Adds the given arc to the current path.
DIRECTION_NORTH: 'north'
Constant for direction north.
DIRECTION_EAST: 'east'
Constant for direction east.
DIRECTION_SOUTH: 'south'
Constant for direction south.
DIRECTION_WEST: 'west'
Constant for direction west.
DEFAULT_FONTSIZE: 11
Defines the default size (in px).
DEFAULT_FONTFAMILY: 'Arial
Defines the default family for all fonts.
Defines various global constants.
SHADOWCOLOR: 'gray'
Defines the color to be used to draw shadows in shapes and windows.
SHADOW_OPACITY: 1
Defines the opacity for shadows.
Close