mxVmlCanvas2D

Implements a canvas to be used for rendering VML.  Here is an example of implementing a fallback for SVG images which are not supported in VML-based browsers.

var mxVmlCanvas2DImage = mxVmlCanvas2D.prototype.image;
mxVmlCanvas2D.prototype.image = function(x, y, w, h, src, aspect, flipH, flipV)
{
  if (src.substring(src.length - 4, src.length) == '.svg')
  {
    src = 'http://www.jgraph.com/images/mxgraph.gif';
  }

  mxVmlCanvas2DImage.apply(this, arguments);
};

To disable anti-aliasing in the output, use the following code.

document.createStyleSheet().cssText = mxClient.VML_PREFIX + '\\:*{antialias:false;)}';

A description of the public API is available in mxXmlCanvas2D.  Note that there is a known issue in VML where gradients are painted using the outer bounding box of rotated shapes, not the actual bounds of the shape.  See also text for plain text label restrictions in shapes for VML.

Summary
mxVmlCanvas2DImplements a canvas to be used for rendering VML.
Variables
rootReference to the container for the SVG content.
pathHolds the current DOM node.
textEnabledSpecifies if text output should be enabledetB.
moveOpContains the string used for moving in paths.
lineOpContains the string used for moving in paths.
curveOpContains the string used for bezier curves.
closeOpHolds the operator for closing curves.
rotatedHtmlBackgroundBackground color for rotated HTML.
vmlScaleSpecifies the scale used to draw VML shapes.
Functions
addNodeAdds the current node to the root.
createTransparentFillCreates a transparent fill.
createFillCreates a fill for the current state.
createStrokeCreates a fill for the current state.
getVmlDashPatternReturns a VML dash pattern for the current dashPattern.
createShadowCreates a shadow for the given node.
createShadowFillCreates the fill for the shadow.
createShadowStrokeCreates the stroke for the shadow.
rotateSets the rotation of the canvas.
beginExtends superclass to create path.
quadToReplaces quadratic curve with bezier curve in VML.
createRectSets the glass gradient.
rectSets the current path to a rectangle.
roundrectSets the current path to a rounded rectangle.
ellipseSets the current path to an ellipse.
imagePaints an image.
createTextCreates the innermost element that contains the HTML text.
textPaints the given text.
plainTextPaints the outline of the current path.
strokePaints the outline of the current path.
fillFills the current path.
fillAndStrokeFills and paints the outline of the current path.

Variables

root

this.root

Reference to the container for the SVG content.

path

Holds the current DOM node.

textEnabled

mxVmlCanvas2D.prototype.textEnabled

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

moveOp

mxVmlCanvas2D.prototype.moveOp

Contains the string used for moving in paths.  Default is ‘m’.

lineOp

mxVmlCanvas2D.prototype.lineOp

Contains the string used for moving in paths.  Default is ‘l’.

curveOp

mxVmlCanvas2D.prototype.curveOp

Contains the string used for bezier curves.  Default is ‘c’.

closeOp

mxVmlCanvas2D.prototype.closeOp

Holds the operator for closing curves.  Default is ‘x e’.

rotatedHtmlBackground

mxVmlCanvas2D.prototype.rotatedHtmlBackground

Background color for rotated HTML.  Default is ‘’.  This can be set to eg. white to improve rendering of rotated text in VML for IE9.

vmlScale

mxVmlCanvas2D.prototype.vmlScale

Specifies the scale used to draw VML shapes.

Functions

addNode

mxVmlCanvas2D.prototype.addNode = function(filled,
stroked)

Adds the current node to the root.

createTransparentFill

mxVmlCanvas2D.prototype.createTransparentFill = function()

Creates a transparent fill.

createFill

mxVmlCanvas2D.prototype.createFill = function()

Creates a fill for the current state.

createStroke

mxVmlCanvas2D.prototype.createStroke = function()

Creates a fill for the current state.

getVmlDashPattern

Returns a VML dash pattern for the current dashPattern.  See http://msdn.microsoft.com/en-us/library/bb264085(v=vs.85).aspx

createShadow

mxVmlCanvas2D.prototype.createShadow = function(node,
filled,
stroked)

Creates a shadow for the given node.

createShadowFill

mxVmlCanvas2D.prototype.createShadowFill = function()

Creates the fill for the shadow.

createShadowStroke

mxVmlCanvas2D.prototype.createShadowStroke = function()

Creates the stroke for the shadow.

rotate

mxVmlCanvas2D.prototype.rotate = function(theta,
flipH,
flipV,
cx,
cy)

Sets the rotation of the canvas.  Note that rotation cannot be concatenated.

begin

mxVmlCanvas2D.prototype.begin = function()

Extends superclass to create path.

quadTo

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

Replaces quadratic curve with bezier curve in VML.

createRect

mxVmlCanvas2D.prototype.createRect = function(nodeName,
x,
y,
w,
h)

Sets the glass gradient.

rect

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

Sets the current path to a rectangle.

roundrect

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

Sets the current path to a rounded rectangle.

ellipse

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

Sets the current path to an ellipse.

image

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

Paints an image.

createText

Creates the innermost element that contains the HTML text.

text

mxVmlCanvas2D.prototype.text = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation)

Paints the given text.  Possible values for format are empty string for plain text and html for HTML markup.  Clipping, text background and border are not supported for plain text in VML.

plainText

mxVmlCanvas2D.prototype.plainText = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation)

Paints the outline of the current path.

stroke

mxVmlCanvas2D.prototype.stroke = function()

Paints the outline of the current path.

fill

mxVmlCanvas2D.prototype.fill = function()

Fills the current path.

fillAndStroke

mxVmlCanvas2D.prototype.fillAndStroke = function()

Fills and paints the outline of the current path.

this.root
Reference to the container for the SVG content.
mxVmlCanvas2D.prototype.textEnabled
Specifies if text output should be enabledetB.
mxVmlCanvas2D.prototype.moveOp
Contains the string used for moving in paths.
mxVmlCanvas2D.prototype.lineOp
Contains the string used for moving in paths.
mxVmlCanvas2D.prototype.curveOp
Contains the string used for bezier curves.
mxVmlCanvas2D.prototype.closeOp
Holds the operator for closing curves.
mxVmlCanvas2D.prototype.rotatedHtmlBackground
Background color for rotated HTML.
mxVmlCanvas2D.prototype.vmlScale
Specifies the scale used to draw VML shapes.
mxVmlCanvas2D.prototype.addNode = function(filled,
stroked)
Adds the current node to the root.
mxVmlCanvas2D.prototype.createTransparentFill = function()
Creates a transparent fill.
mxVmlCanvas2D.prototype.createFill = function()
Creates a fill for the current state.
mxVmlCanvas2D.prototype.createStroke = function()
Creates a fill for the current state.
mxVmlCanvas2D.prototype.createShadow = function(node,
filled,
stroked)
Creates a shadow for the given node.
mxVmlCanvas2D.prototype.createShadowFill = function()
Creates the fill for the shadow.
mxVmlCanvas2D.prototype.createShadowStroke = function()
Creates the stroke for the shadow.
mxVmlCanvas2D.prototype.rotate = function(theta,
flipH,
flipV,
cx,
cy)
Sets the rotation of the canvas.
mxVmlCanvas2D.prototype.begin = function()
Extends superclass to create path.
mxVmlCanvas2D.prototype.quadTo = function(x1,
y1,
x2,
y2)
Replaces quadratic curve with bezier curve in VML.
mxVmlCanvas2D.prototype.createRect = function(nodeName,
x,
y,
w,
h)
Sets the glass gradient.
mxVmlCanvas2D.prototype.rect = function(x,
y,
w,
h)
Sets the current path to a rectangle.
mxVmlCanvas2D.prototype.roundrect = function(x,
y,
w,
h,
dx,
dy)
Sets the current path to a rounded rectangle.
mxVmlCanvas2D.prototype.ellipse = function(x,
y,
w,
h)
Sets the current path to an ellipse.
mxVmlCanvas2D.prototype.image = function(x,
y,
w,
h,
src,
aspect,
flipH,
flipV)
Paints an image.
mxVmlCanvas2D.prototype.text = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation)
Paints the given text.
mxVmlCanvas2D.prototype.plainText = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation)
Paints the outline of the current path.
mxVmlCanvas2D.prototype.stroke = function()
Paints the outline of the current path.
mxVmlCanvas2D.prototype.fill = function()
Fills the current path.
mxVmlCanvas2D.prototype.fillAndStroke = function()
Fills and paints the outline of the current path.
Base class for all canvases.
Close