Class XmlCanvas2D

Base class for all canvases.

The following methods make up the public interface of the canvas 2D for all painting in mxGraph:

save, restore
scale, translate, rotate
setAlpha, setFillAlpha, setStrokeAlpha, setFillColor, setGradient, setStrokeColor, setStrokeWidth, setDashed, setDashPattern, setLineCap, setLineJoin, setMiterLimit
setFontColor, setFontBackgroundColor, setFontBorderColor, setFontSize, setFontFamily, setFontStyle
setShadow, setShadowColor, setShadowAlpha, setShadowOffset
rect, roundrect, ellipse, image, text
begin, moveTo, lineTo, quadTo, curveTo
stroke, fill, fillAndStroke

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. Subclasses may add native support for arcs.

All color values of NONE will be converted to null in the state.

Hierarchy (View Summary)

AbstractCanvas2D
- XmlCanvas2D

Constructors

constructor

new XmlCanvas2D(root: Element): XmlCanvas2D
Parameters
- root: Element
Returns XmlCanvas2D
Overrides AbstractCanvas2D.constructor
- Defined in view/canvas/XmlCanvas2D.ts:26

Properties

closeOp

closeOp: string = 'Z'

Holds the operator for closing curves. Default is 'Z'.

compressed

compressed: boolean = true

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

Default

true

converter

converter: UrlConverter

Holds the to convert image URLs.

curveOp

curveOp: string = 'C'

Contains the string used for bezier curves. Default is 'C'.

lastX

lastX: number = 0

Holds the last x coordinate.

lastY

lastY: number = 0

Holds the last y coordinate.

lineOp

lineOp: string = 'L'

Contains the string used for moving in paths. Default is 'L'.

moveOp

moveOp: string = 'M'

Contains the string used for moving in paths. Default is 'M'.

path

path: (string | number)[] = []

Holds the current path as an array.

pointerEvents

pointerEvents: boolean = false

Boolean value that specifies if events should be handled. Default is false.

pointerEventsValue

pointerEventsValue: null | string = null

quadOp

quadOp: string = 'Q'

Contains the string used for quadratic paths. Default is 'Q'.

root

root: Element

Reference to the container for the SVG content.

rotateHtml

rotateHtml: boolean = true

Switch for rotation of HTML. Default is false.

state

state: CanvasState = ...

Holds the current state.

states

states: CanvasState[] = []

Stack of states.

textEnabled

textEnabled: boolean = true

Specifies if text output should be enabled.

Default

true

Methods

addOp

addOp(op: string, ...args: number[]): void
Adds the given operation to the path.
Parameters
- op: string
- ...args: number[]
Returns void
Inherited from AbstractCanvas2D.addOp
- Defined in view/canvas/AbstractCanvas2D.ts:204

arcTo

arcTo(
    rx: number,
    ry: number,
    angle: number,
    largeArcFlag: boolean,
    sweepFlag: boolean,
    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: boolean
- sweepFlag: boolean
- x: number
- y: number
Returns void
Inherited from AbstractCanvas2D.arcTo
- Defined in view/canvas/AbstractCanvas2D.ts:508

begin

begin(): void
Starts a new path and puts it into the drawing buffer.

Returns void
Overrides AbstractCanvas2D.begin
- Defined in view/canvas/XmlCanvas2D.ts:751

close

close(): void
Closes the current path.

Returns void
Overrides AbstractCanvas2D.close
- Defined in view/canvas/XmlCanvas2D.ts:836

createElement

createElement(name: string): Element
Creates the given element using the owner document of root.
Parameters
- name: string
Returns Element
- Defined in view/canvas/XmlCanvas2D.ts:96

createState

createState(): CanvasState
Creates the state of the this canvas.

Returns CanvasState
Inherited from AbstractCanvas2D.createState
- Defined in view/canvas/AbstractCanvas2D.ts:156

createUrlConverter

createUrlConverter(): UrlConverter
Create a new and returns it.

Returns UrlConverter
Inherited from AbstractCanvas2D.createUrlConverter
- Defined in view/canvas/AbstractCanvas2D.ts:141

curveTo

curveTo(
    x1: number,
    y1: number,
    x2: number,
    y2: number,
    x3: number,
    y3: number,
): void
Adds a bezier curve to the current path.
Parameters
- x1: number
  Number that represents the x-coordinate of the first control point.
- y1: number
  Number that represents the y-coordinate of the first control point.
- x2: number
  Number that represents the x-coordinate of the second control point.
- y2: number
  Number that represents the y-coordinate of the second control point.
- x3: number
  Number that represents the x-coordinate of the endpoint.
- y3: number
  Number that represents the y-coordinate of the endpoint.
Returns void
Overrides AbstractCanvas2D.curveTo
- Defined in view/canvas/XmlCanvas2D.ts:820

ellipse

ellipse(x: number, y: number, w: number, h: number): void
Puts an ellipse into the drawing buffer.
Parameters
- x: number
  Number that represents the x-coordinate of the ellipse.
- y: number
  Number that represents the y-coordinate of the ellipse.
- w: number
  Number that represents the width of the ellipse.
- h: number
  Number that represents the height of the ellipse.
Returns void
Overrides AbstractCanvas2D.ellipse
- Defined in view/canvas/XmlCanvas2D.ts:698

end

end(): void
Empty implementation for backwards compatibility. This will be removed.

Returns void
Overrides AbstractCanvas2D.end
- Defined in view/canvas/XmlCanvas2D.ts:757

fill

fill(): void
Fills the current drawing buffer.

Returns void
Overrides AbstractCanvas2D.fill
- Defined in view/canvas/XmlCanvas2D.ts:934

fillAndStroke

fillAndStroke(): void
Fills the current drawing buffer and its outline.

Returns void
Overrides AbstractCanvas2D.fillAndStroke
- Defined in view/canvas/XmlCanvas2D.ts:941

format

format(value: string | number): number
Returns a formatted number with 2 decimal places.
Parameters
- value: string | number
Returns number
Overrides AbstractCanvas2D.format
- Defined in view/canvas/XmlCanvas2D.ts:85

image

image(
    x: number,
    y: number,
    w: number,
    h: number,
    src: string,
    aspect?: boolean,
    flipH?: boolean,
    flipV?: boolean,
): void
Paints an image.
Parameters
- x: number
  Number that represents the x-coordinate of the image.
- y: number
  Number that represents the y-coordinate of the image.
- w: number
  Number that represents the width of the image.
- h: number
  Number that represents the height of the image.
- src: string
  String that specifies the URL of the image.
- aspect: boolean = true
  Boolean indicating if the aspect of the image should be preserved.
- flipH: boolean = false
  Boolean indicating if the image should be flipped horizontally.
- flipV: boolean = false
  Boolean indicating if the image should be flipped vertically.
Returns void
Overrides AbstractCanvas2D.image
- Defined in view/canvas/XmlCanvas2D.ts:719

lineTo

lineTo(x: number, y: number): void
Draws a line to the given coordinates.
Parameters
- x: number
  Number that represents the x-coordinate of the endpoint.
- y: number
  Number that represents the y-coordinate of the endpoint.
Returns void
Overrides AbstractCanvas2D.lineTo
- Defined in view/canvas/XmlCanvas2D.ts:782

moveTo

moveTo(x: number, y: number): void
Moves the current path the given point.
Parameters
- x: number
  Number that represents the x-coordinate of the point.
- y: number
  Number that represents the y-coordinate of the point.
Returns void
Overrides AbstractCanvas2D.moveTo
- Defined in view/canvas/XmlCanvas2D.ts:767

quadTo

quadTo(x1: number, y1: number, x2: number, y2: number): void
Adds a quadratic curve to the current path.
Parameters
- x1: number
  Number that represents the x-coordinate of the control point.
- y1: number
  Number that represents the y-coordinate of the control point.
- x2: number
  Number that represents the x-coordinate of the endpoint.
- y2: number
  Number that represents the y-coordinate of the endpoint.
Returns void
Overrides AbstractCanvas2D.quadTo
- Defined in view/canvas/XmlCanvas2D.ts:799

rect

rect(x: number, y: number, w: number, h: number): void
Puts a rectangle into the drawing buffer.
Parameters
- x: number
  Number that represents the x-coordinate of the rectangle.
- y: number
  Number that represents the y-coordinate of the rectangle.
- w: number
  Number that represents the width of the rectangle.
- h: number
  Number that represents the height of the rectangle.
Returns void
Overrides AbstractCanvas2D.rect
- Defined in view/canvas/XmlCanvas2D.ts:660

reset

reset(): void
Resets the state of this canvas.

Returns void
Inherited from AbstractCanvas2D.reset
- Defined in view/canvas/AbstractCanvas2D.ts:148

restore

restore(): void
Restores the drawing state.

Returns void
Overrides AbstractCanvas2D.restore
- Defined in view/canvas/XmlCanvas2D.ts:113

rotate

rotate(
    theta: number,
    flipH: boolean,
    flipV: boolean,
    cx: number,
    cy: number,
): void
Rotates and/or flips the output around a given center. (Note: Due to limitations in VML, the rotation cannot be concatenated.)
Parameters
- theta: number
  Number that represents the angle of the rotation (in degrees).
- flipH: boolean
  Boolean indicating if the output should be flipped horizontally.
- flipV: boolean
  Boolean indicating if the output should be flipped vertically.
- cx: number
  Number that represents the x-coordinate of the rotation center.
- cy: number
  Number that represents the y-coordinate of the rotation center.
Returns void
Overrides AbstractCanvas2D.rotate
- Defined in view/canvas/XmlCanvas2D.ts:154

rotatePoint

rotatePoint(x: number, y: number, theta: number, cx: number, cy: number): Point
Rotates the given point and returns the result as an Point.
Parameters
- x: number
- y: number
- theta: number
- cx: number
- cy: number
Returns Point
Inherited from AbstractCanvas2D.rotatePoint
- Defined in view/canvas/AbstractCanvas2D.ts:223

roundrect

roundrect(
    x: number,
    y: number,
    w: number,
    h: number,
    dx: number,
    dy: number,
): void
Puts a rounded rectangle into the drawing buffer.
Parameters
- x: number
  Number that represents the x-coordinate of the rectangle.
- y: number
  Number that represents the y-coordinate of the rectangle.
- w: number
  Number that represents the width of the rectangle.
- h: number
  Number that represents the height of the rectangle.
- dx: number
  Number that represents the horizontal rounding.
- dy: number
  Number that represents the vertical rounding.
Returns void
Overrides AbstractCanvas2D.roundrect
- Defined in view/canvas/XmlCanvas2D.ts:679

save

save(): void
Saves the drawing state.

Returns void
Overrides AbstractCanvas2D.save
- Defined in view/canvas/XmlCanvas2D.ts:103

scale

scale(value: number): void
Scales the output.
Parameters
- value: number
Returns void
Overrides AbstractCanvas2D.scale
- Defined in view/canvas/XmlCanvas2D.ts:125

setAlpha

setAlpha(value: number): void
Sets the current alpha.
Parameters
- value: number
  Number that represents the new alpha. Possible values are between 1 (opaque) and 0 (transparent).
Returns void
Overrides AbstractCanvas2D.setAlpha
- Defined in view/canvas/XmlCanvas2D.ts:173

setDashed

setDashed(value: boolean, fixDash: boolean): void
Enables or disables dashed lines.
Parameters
- value: boolean
  Boolean that specifies if dashed lines should be enabled.
- fixDash: boolean
Returns void
Default
```
false
```
Overrides AbstractCanvas2D.setDashed
- Defined in view/canvas/XmlCanvas2D.ts:349

setDashPattern

setDashPattern(value: string): void
Sets the current dash pattern.
Parameters
- value: string
  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.
Returns void
Default
```
'3 3'
```
Overrides AbstractCanvas2D.setDashPattern
- Defined in view/canvas/XmlCanvas2D.ts:376

setFillAlpha

setFillAlpha(value: number): void
Sets the current fill alpha.
Parameters
- value: number
  Number that represents the new fill alpha. Possible values are between 1 (opaque) and 0 (transparent).
Returns void
Overrides AbstractCanvas2D.setFillAlpha
- Defined in view/canvas/XmlCanvas2D.ts:192

setFillColor

setFillColor(value?: null | string): void
Sets the current fill color.
Parameters
- value: null | string = null
  Hexadecimal representation of the color or 'none'.
Returns void
Overrides AbstractCanvas2D.setFillColor
- Defined in view/canvas/XmlCanvas2D.ts:229

setFontBackgroundColor

setFontBackgroundColor(value?: null | string): void
Sets the current font background color.
Parameters
- value: null | string = null
  Hexadecimal representation of the color or 'none'.
Returns void
Overrides AbstractCanvas2D.setFontBackgroundColor
- Defined in view/canvas/XmlCanvas2D.ts:478

setFontBorderColor

setFontBorderColor(value?: null | string): void
Sets the current font border color.
Parameters
- value: null | string = null
  Hexadecimal representation of the color or 'none'.
Returns void
Overrides AbstractCanvas2D.setFontBorderColor
- Defined in view/canvas/XmlCanvas2D.ts:502

setFontColor

setFontColor(value?: null | string): void
Sets the current font color.
Parameters
- value: null | string = null
  Hexadecimal representation of the color or 'none'.
Returns void
Default
```
'#000000'
```
Overrides AbstractCanvas2D.setFontColor
- Defined in view/canvas/XmlCanvas2D.ts:454

setFontFamily

setFontFamily(value: string): void
Sets the current font family.
Parameters
- value: string
  String representation of the font family. This handles the same values as the CSS font-family property.
Returns void
Default
mxConstants.DEFAULT_FONTFAMILY
Overrides AbstractCanvas2D.setFontFamily
- Defined in view/canvas/XmlCanvas2D.ts:549

setFontSize

setFontSize(value: number): void
Sets the current font size.
Parameters
- value: number
  Numeric representation of the font size.
Returns void
Default
mxConstants.DEFAULT_FONTSIZE
Overrides AbstractCanvas2D.setFontSize
- Defined in view/canvas/XmlCanvas2D.ts:527

setFontStyle

setFontStyle(value?: null | number): void
Sets the current font style.
Parameters
- value: null | number = 0
  Numeric representation of the font family. This is the sum of the font styles from mxConstants.
Returns void
Overrides AbstractCanvas2D.setFontStyle
- Defined in view/canvas/XmlCanvas2D.ts:570

setGradient

setGradient(
    color1: null | string,
    color2: null | string,
    x: number,
    y: number,
    w: number,
    h: number,
    direction: DirectionValue,
    alpha1?: number,
    alpha2?: number,
): void
Sets the gradient. Note that the coordinates may be ignored by some implementations.
Parameters
- color1: null | string
  Hexadecimal representation of the start color.
- color2: null | string
  Hexadecimal representation of the end color.
- x: number
  X-coordinate of the gradient region.
- y: number
  y-coordinate of the gradient region.
- w: number
  Width of the gradient region.
- h: number
  Height of the gradient region.
- direction: DirectionValue
  One of Constants#DIRECTION_NORTH, Constants#DIRECTION_EAST, Constants#DIRECTION_SOUTH or Constants#DIRECTION_WEST.
- alpha1: number = 1.0
  Optional alpha of the start color. Default is 1. Possible values are between 1 (opaque) and 0 (transparent).
- alpha2: number = 1.0
  Optional alpha of the end color. Default is 1. Possible values are between 1 (opaque) and 0 (transparent).
Returns void
Overrides AbstractCanvas2D.setGradient
- Defined in view/canvas/XmlCanvas2D.ts:262

setLineCap

setLineCap(value: string): void
Sets the line cap.
Parameters
- value: string
  String that represents the line cap. Possible values are flat, round and square.
Returns void
Default
```
'flat' which corresponds to 'butt' in SVG
```
Overrides AbstractCanvas2D.setLineCap
- Defined in view/canvas/XmlCanvas2D.ts:396

setLineJoin

setLineJoin(value: string): void
Sets the line join.
Parameters
- value: string
  String that represents the line join. Possible values are miter, round and bevel.
Returns void
Default
```
'miter'
```
Overrides AbstractCanvas2D.setLineJoin
- Defined in view/canvas/XmlCanvas2D.ts:416

setLink

setLink(link: null | string): void
Sets the current link. Hook for subclassers.
Parameters
- link: null | string
Returns void
Inherited from AbstractCanvas2D.setLink
- Defined in view/canvas/AbstractCanvas2D.ts:254

setMiterLimit

setMiterLimit(value: number): void
Sets the miter limit.
Parameters
- value: number
  Number that represents the miter limit.
Returns void
Default
```
10
```
Overrides AbstractCanvas2D.setMiterLimit
- Defined in view/canvas/XmlCanvas2D.ts:435

setShadow

setShadow(value: boolean): void
Enables or disables shadows.
Parameters
- value: boolean
  Boolean that specifies if shadows should be enabled.
Returns void
Overrides AbstractCanvas2D.setShadow
- Defined in view/canvas/XmlCanvas2D.ts:594

setShadowAlpha

setShadowAlpha(value: number): void
Sets the current shadow alpha.
Parameters
- value: number
  Number that represents the new alpha. Possible values are between 1 (opaque) and 0 (transparent).
Returns void
Overrides AbstractCanvas2D.setShadowAlpha
- Defined in view/canvas/XmlCanvas2D.ts:625

setShadowColor

setShadowColor(value?: null | string): void
Sets the current shadow color.
Parameters
- value: null | string = null
  Hexadecimal representation of the color or none.
Returns void
Overrides AbstractCanvas2D.setShadowColor
- Defined in view/canvas/XmlCanvas2D.ts:607

setShadowOffset

setShadowOffset(dx: number, dy: number): void
Sets the current shadow offset.
Parameters
- dx: number
  Number that represents the horizontal offset of the shadow.
- dy: number
  Number that represents the vertical offset of the shadow.
Returns void
Overrides AbstractCanvas2D.setShadowOffset
- Defined in view/canvas/XmlCanvas2D.ts:638

setStrokeAlpha

setStrokeAlpha(value: number): void
Sets the current stroke alpha.
Parameters
- value: number
  Number that represents the new stroke alpha. Possible values are between 1 (opaque) and 0 (transparent).
Returns void
Overrides AbstractCanvas2D.setStrokeAlpha
- Defined in view/canvas/XmlCanvas2D.ts:211

setStrokeColor

setStrokeColor(value?: null | string): void
Sets the current stroke color.
Parameters
- value: null | string = null
  Hexadecimal representation of the color or 'none'.
Returns void
Overrides AbstractCanvas2D.setStrokeColor
- Defined in view/canvas/XmlCanvas2D.ts:306

setStrokeWidth

setStrokeWidth(value: number): void
Sets the current stroke width.
Parameters
- value: number
  Numeric representation of the stroke width.
Returns void
Overrides AbstractCanvas2D.setStrokeWidth
- Defined in view/canvas/XmlCanvas2D.ts:328

stroke

stroke(): void
Paints the outline of the current drawing buffer.

Returns void
Overrides AbstractCanvas2D.stroke
- Defined in view/canvas/XmlCanvas2D.ts:927

text

text(
    x: number,
    y: number,
    w: number,
    h: number,
    str: string | HTMLElement,
    align?: null | string,
    valign?: null | string,
    wrap?: null | boolean,
    format?: null | string,
    overflow?: null | string,
    clip?: null | boolean,
    rotation?: null | number,
    dir?: null | TextDirectionValue,
): void
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
- x: number
  Number that represents the x-coordinate of the text.
- y: number
  Number that represents the y-coordinate of the text.
- w: number
  Number that represents the available width for the text or 0 for automatic width.
- h: number
  Number that represents the available height for the text or 0 for automatic height.
- str: string | HTMLElement
  String that specifies the text to be painted.
- align: null | string = null
  String that represents the horizontal alignment.
- valign: null | string = null
  String that represents the vertical alignment.
- wrap: null | boolean = null
  Boolean that specifies if word-wrapping is enabled. Requires w > 0.
- format: null | string = null
  Empty string for plain text or 'html' for HTML markup.
- overflow: null | string = null
  Specifies the overflow behaviour of the label. Requires w > 0 and/or h > 0.
- clip: null | boolean = null
  Boolean that specifies if the label should be clipped. Requires w > 0 and/or h > 0.
- rotation: null | number = null
  Number that specifies the angle of the rotation around the anchor point of the text.
- dir: null | TextDirectionValue = null
  Optional string that specifies the text direction. Possible values are rtl and ltr.
Returns void
Overrides AbstractCanvas2D.text
- Defined in view/canvas/XmlCanvas2D.ts:861

translate

translate(dx: number, dy: number): void
Translates the output.
Parameters
- dx: number
  Number that specifies the horizontal translation.
- dy: number
  Number that specifies the vertical translation.
Returns void
Overrides AbstractCanvas2D.translate
- Defined in view/canvas/XmlCanvas2D.ts:137

updateText

updateText(): void
Returns void
Overrides AbstractCanvas2D.updateText
- Defined in view/canvas/XmlCanvas2D.ts:744

writeDefaults

writeDefaults(): void
Writes the rendering defaults to root:

Returns void
- Defined in view/canvas/XmlCanvas2D.ts:55

Class XmlCanvas2D

Hierarchy (View Summary)

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns XmlCanvas2D

Properties

closeOp

compressed

Default

converter

curveOp

lastX

lastY

lineOp

moveOp

path

pointerEvents

pointerEventsValue

quadOp

root

rotateHtml

state

states

textEnabled

Default

Methods

addOp

Parameters

Returns void

arcTo

Parameters

Returns void

begin

Returns void

close

Returns void

createElement

Parameters

Returns Element

createState

Returns CanvasState

createUrlConverter

Returns UrlConverter

curveTo

Parameters

Returns void

ellipse

Parameters

Returns void

end

Returns void

fill

Returns void

fillAndStroke

Returns void

format

Parameters

Returns number

image

Parameters

Returns void

lineTo

Parameters

Returns void

moveTo

Parameters

Returns void

quadTo

Parameters

Returns void

rect

Parameters

Returns void

reset

Returns void