Class XmlCanvas2D

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

,
, ,
, , , , , , , , , , ,
, , , , ,
, , ,
, , , ,
, moveTo, , ,
, ,

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

Constructor: D

Constructs a new abstract canvas.

Hierarchy (view full)

AbstractCanvas2D
- XmlCanvas2D

Constructors

constructor

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

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, ...args): void
Adds the given operation to the path.
Parameters
- op: string
- Rest...args: number[]
Returns void
Inherited from AbstractCanvas2D.addOp
- Defined in view/canvas/AbstractCanvas2D.ts:192

arcTo

arcTo(rx, ry, angle, largeArcFlag, sweepFlag, x, y): 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:489

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:799

close

close(): void
Closes the current path.

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

createElement

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

createState

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

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

createUrlConverter

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

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

curveTo

curveTo(x1, y1, x2, y2, x3, y3): 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:868

ellipse

ellipse(x, y, w, h): 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:746

end

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

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

fill

fill(): void
Fills the current drawing buffer.

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

fillAndStroke

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

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

format

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

image

image(x, y, w, h, src, aspect?, flipH?, flipV?): 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:767

lineTo

lineTo(x, y): 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:830

moveTo

moveTo(x, y): 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:815

quadTo

quadTo(x1, y1, x2, y2): 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:847

rect

rect(x, y, w, h): 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:708

reset

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

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

restore

restore(): void
Restores the drawing state.

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

rotate

rotate(theta, flipH, flipV, cx, cy): 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:185

rotatePoint

rotatePoint(x, y, theta, cx, cy): 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:211

roundrect

roundrect(x, y, w, h, dx, dy): 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:727

save

save(): void
Saves the drawing state.

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

scale

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

setAlpha

setAlpha(value): 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:204

setDashed

setDashed(value, fixDash): 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:380

setDashPattern

setDashPattern(value): 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:407

setFillAlpha

setFillAlpha(value): 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:223

setFillColor

setFillColor(value?): 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:260

setFontBackgroundColor

setFontBackgroundColor(value?): 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:509

setFontBorderColor

setFontBorderColor(value?): 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:533

setFontColor

setFontColor(value?): 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:485

setFontFamily

setFontFamily(value): 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:580

setFontSize

setFontSize(value): 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:558

setFontStyle

setFontStyle(value?): 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:601

setGradient

setGradient(color1, color2, x, y, w, h, direction, alpha1?, alpha2?): 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:293

setLineCap

setLineCap(value): 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:427

setLineJoin

setLineJoin(value): 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:447

setLink

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

setMiterLimit

setMiterLimit(value): 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:466

setShadow

setShadow(value): 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:625

setShadowAlpha

setShadowAlpha(value): void
Sets the current shadows alpha. Default is mxConstants.SHADOW_OPACITY
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:667

setShadowColor

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

setShadowOffset

setShadowOffset(dx, dy): 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:686

setStrokeAlpha

setStrokeAlpha(value): 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:242

setStrokeColor

setStrokeColor(value?): 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:337

setStrokeWidth

setStrokeWidth(value): 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:359

stroke

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

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

text

text(x, y, w, h, str, align?, valign?, wrap?, format?, overflow?, clip?, rotation?, dir?): 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:909

translate

translate(dx, dy): 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:168

updateText

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

writeDefaults

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

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

Class XmlCanvas2D

Hierarchy (view full)

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