Options
All
  • Public
  • Public/Protected
  • All
Menu

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

example
(code)
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.

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

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.

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Properties

closeOp

closeOp: string

Holds the operator for closing curves.

default

'x'

curveOp

curveOp: string

Contains the string used for bezier curves.

default

'c'

lastX

lastX: number

Holds the last x coordinate.

default

0

lastY

lastY: number

Holds the last y coordinate.

default

0

lineOp

lineOp: string

Contains the string used for moving in paths.

default

'l'

moveOp

moveOp: string

Contains the string used for moving in paths.

default

'm'

node

node: Element

Holds the current DOM node.

path

path: string[]

Holds the current path as an array.

pointerEvents

pointerEvents: boolean

Boolean value that specifies if events should be handled.

default

false

quadOp

quadOp: string

Contains the string used for quadratic paths.

default

'Q'

root

root: Element

Reference to the container for the SVG content.

rotateHtml

rotateHtml: boolean

Switch for rotation of HTML.

default

true

rotatedHtmlBackground

rotatedHtmlBackground: string

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

default

''

state

state: mxCanvas2DState

Holds the current state.

states

states: mxCanvas2DState[]

Stack of states.

textEnabled

textEnabled: boolean

Specifies if text output should be enabled.

default

true

vmlScale

vmlScale: number

Specifies the scale used to draw VML shapes.

default

1

Methods

addNode

  • addNode(filled: boolean, stroked: boolean): void

addOp

  • addOp(): void

arcTo

  • arcTo(rx: number, ry: number, angle: number, largeArcFlag: number, sweepFlag: number, x: number, y: number): void

  • Adds the given arc to the current path. This is a synthetic operation that is broken down into curves.

    Parameters

    • rx: number
    • ry: number
    • angle: number
    • largeArcFlag: number
    • sweepFlag: number
    • x: number
    • y: number

    Returns void

begin

  • begin(): void

close

  • close(): void

  • Closes the current path.

    Note: the mxGraph JS code declares arguments (x1: number, y1: number, x2: number, y2: number, x3: number, y3: number) which are not used in the abstract implementation. The mxXmlCanvas2D JS implementation overrides this method without arguments. Decision is then taken to remove them here.

    Returns void

createDiv

  • createDiv(str: string, align: string, valign: string, overflow: string): HTMLElement

  • Creates the innermost element that contains the HTML text.

    Parameters

    • str: string
    • align: string
    • valign: string
    • overflow: string

    Returns HTMLElement

createElement

  • createElement(name: string): HTMLElement

createFill

  • createFill(): HTMLElement

createRect

  • createRect(nodeName: string, x: number, y: number, w: number, h: number): HTMLElement

  • Sets the glass gradient.

    Parameters

    • nodeName: string
    • x: number
    • y: number
    • w: number
    • h: number

    Returns HTMLElement

createShadow

  • createShadow(node: Element, filled: boolean, stroked: boolean): Element

  • Creates a shadow for the given node.

    Parameters

    • node: Element
    • filled: boolean
    • stroked: boolean

    Returns Element

createShadowFill

  • createShadowFill(): HTMLElement

createShadowStroke

  • createShadowStroke(): HTMLElement

createState

createStroke

  • createStroke(): HTMLElement

createTransparentFill

  • createTransparentFill(): HTMLElement

createUrlConverter

createVmlElement

  • createVmlElement(name: string): HTMLElement

curveTo

  • curveTo(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void

ellipse

  • ellipse(x: number, y: number, w: number, h: number): void

end

  • end(): void

fill

  • fill(): void

fillAndStroke

  • fillAndStroke(): void

format

  • format(value: string): number

getVmlDashStyle

  • getVmlDashStyle(): string

image

  • image(x: number, y: number, w: number, h: number, src: string, aspect: boolean, flipH: boolean, flipV: boolean): void

lineTo

  • lineTo(x: number, y: number): void

moveTo

  • moveTo(x: number, y: number): void

plainText

  • plainText(x: number, y: number, w: number, h: number, str: string, align: string, valign: string, wrap: string, overflow: string, clip: string, rotation: number, dir: string): void

  • Paints the outline of the current path.

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number
    • str: string
    • align: string
    • valign: string
    • wrap: string
    • overflow: string
    • clip: string
    • rotation: number
    • dir: string

    Returns void

quadTo

  • quadTo(x1: number, y1: number, x2: number, y2: number): void

rect

  • rect(x: number, y: number, w: number, h: number): void

reset

  • reset(): void

restore

  • restore(): void

rotate

  • rotate(theta: number, flipH: boolean, flipV: boolean, cx: number, cy: number): void

rotatePoint

  • rotatePoint(x: number, y: number, theta: number, cx: number, cy: number): void

roundrect

  • roundrect(x: number, y: number, w: number, h: number, dx: number, dy: number): void

save

  • save(): void

scale

  • scale(value: number): void

setAlpha

  • setAlpha(value: number): void

setDashPattern

  • setDashPattern(value: string): void

setDashed

  • setDashed(value: boolean, fixDash: boolean): void

setFillAlpha

  • setFillAlpha(value: number): void

setFillColor

  • setFillColor(value: string): void

setFontBackgroundColor

  • setFontBackgroundColor(value: string): void

setFontBorderColor

  • setFontBorderColor(value: string): void

setFontColor

  • setFontColor(value: string): void

setFontFamily

  • setFontFamily(value: string): void

setFontSize

  • setFontSize(value: number): void

setFontStyle

  • setFontStyle(value: string): void

setGradient

  • setGradient(color1: string, color2: string, x: number, y: number, w: number, h: number, direction: string, alpha1: number, alpha2: number): void

setLineCap

  • setLineCap(value: string): void

setLineJoin

  • setLineJoin(value: string): void

setLink

  • setLink(link: string): void

setMiterLimit

  • setMiterLimit(value: number): void

setShadow

  • setShadow(enabled: boolean): void

setShadowAlpha

  • setShadowAlpha(value: number): void

setShadowColor

  • setShadowColor(value: string): void

setShadowOffset

  • setShadowOffset(dx: number, dy: number): void

setStrokeAlpha

  • setStrokeAlpha(value: number): void

setStrokeColor

  • setStrokeColor(value: string): void

setStrokeWidth

  • setStrokeWidth(value: number): void

stroke

  • stroke(): void

text

  • text(x: number, y: number, w: number, h: number, str: string, align: string, valign: string, wrap: string, format: string, overflow: string, clip: string, rotation: number, dir: string): void

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

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number
    • str: string
    • align: string
    • valign: string
    • wrap: string
    • format: string
    • overflow: string
    • clip: string
    • rotation: number
    • dir: string

    Returns void

translate

  • translate(dx: number, dy: number): void

Generated using TypeDoc