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

mxVmlCanvas2D	Implements a canvas to be used for rendering VML.
Variables
root	Reference to the container for the SVG content.
path	Holds the current DOM node.
textEnabled	Specifies if text output should be enabledetB.
moveOp	Contains the string used for moving in paths.
lineOp	Contains the string used for moving in paths.
curveOp	Contains the string used for bezier curves.
closeOp	Holds the operator for closing curves.
rotatedHtmlBackground	Background color for rotated HTML.
vmlScale	Specifies the scale used to draw VML shapes.
Functions
addNode	Adds the current node to the root.
createTransparentFill	Creates a transparent fill.
createFill	Creates a fill for the current state.
createStroke	Creates a fill for the current state.
getVmlDashPattern	Returns a VML dash pattern for the current dashPattern.
createShadow	Creates a shadow for the given node.
createShadowFill	Creates the fill for the shadow.
createShadowStroke	Creates the stroke for the shadow.
rotate	Sets the rotation of the canvas.
begin	Extends superclass to create path.
quadTo	Replaces quadratic curve with bezier curve in VML.
createRect	Sets the glass gradient.
rect	Sets the current path to a rectangle.
roundrect	Sets the current path to a rounded rectangle.
ellipse	Sets the current path to an ellipse.
image	Paints an image.
createText	Creates the innermost element that contains the HTML text.
text	Paints the given text.
plainText	Paints the outline of the current path.
stroke	Paints the outline of the current path.
fill	Fills the current path.
fillAndStroke	Fills 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.