Class AbstractCanvas2D`Abstract`

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
- SvgCanvas2D
- XmlCanvas2D

Constructors

`Protected`constructor

new AbstractCanvas2D(): AbstractCanvas2D
Returns AbstractCanvas2D
- Defined in view/canvas/AbstractCanvas2D.ts:65

Properties

closeOp

closeOp: string = 'Z'

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

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

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.

Methods

addOp

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

begin

begin(): void
Starts a new path.

Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:464

close

close(
    x1?: number,
    y1?: number,
    x2?: number,
    y2?: number,
    x3?: number,
    y3?: number,
): void
Closes the current path.
Parameters
- Optionalx1: number
- Optionaly1: number
- Optionalx2: number
- Optionaly2: number
- Optionalx3: number
- Optionaly3: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:546

createState

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

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

createUrlConverter

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

Returns UrlConverter
- 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
- y1: number
- x2: number
- y2: number
- x3: number
- y3: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:494

`Abstract`ellipse

ellipse(x: number, y: number, w: number, h: number): void
Parameters
- x: number
- y: number
- w: number
- h: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:572

`Abstract`end

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

Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:553

`Abstract`fill

fill(): void
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:557

`Abstract`fillAndStroke

fillAndStroke(): void
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:559

format

format(value: number): number
Rounds all numbers to integers.
Parameters
- value: number
Returns number
- Defined in view/canvas/AbstractCanvas2D.ts:197

`Abstract`image

image(
    x: number,
    y: number,
    w: number,
    h: number,
    src: string,
    aspect: boolean,
    flipH: boolean,
    flipV: boolean,
): void
Parameters
- x: number
- y: number
- w: number
- h: number
- src: string
- aspect: boolean
- flipH: boolean
- flipV: boolean
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:574

lineTo

lineTo(x: number, y: number): void
Draws a line to the given coordinates. Uses moveTo with the op argument.
Parameters
- x: number
- y: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:480

moveTo

moveTo(x: number, y: number): void
Moves the current path the given coordinates.
Parameters
- x: number
- y: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:473

quadTo

quadTo(x1: number, y1: number, x2: number, y2: number): void
Adds a quadratic curve to the current path.
Parameters
- x1: number
- y1: number
- x2: number
- y2: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:487

`Abstract`rect

rect(x: number, y: number, w: number, h: number): void
Parameters
- x: number
- y: number
- w: number
- h: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:561

reset

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

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

restore

restore(): void
Restores the current state.

Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:245

rotate

rotate(
    theta: number,
    flipH: boolean,
    flipV: boolean,
    cx: number,
    cy: number,
): void
Rotates the current state.
Parameters
- theta: number
- flipH: boolean
- flipV: boolean
- cx: number
- cy: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:278

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
- Defined in view/canvas/AbstractCanvas2D.ts:223

`Abstract`roundrect

roundrect(
    x: number,
    y: number,
    w: number,
    h: number,
    r1: number,
    r2: number,
): void
Parameters
- x: number
- y: number
- w: number
- h: number
- r1: number
- r2: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:563

save

save(): void
Saves the current state.

Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:237

scale

scale(value: number): void
Scales the current state.
Parameters
- value: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:261

setAlpha

setAlpha(value: number): void
Sets the current alpha.
Parameters
- value: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:285

setDashed

setDashed(value: boolean, fixDash?: boolean): void
Enables or disables dashed lines.
Parameters
- value: boolean
- fixDash: boolean = false
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:350

setDashPattern

setDashPattern(value: string): void
Sets the current dash pattern.
Parameters
- value: string
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:358

setFillAlpha

setFillAlpha(value: number): void
Sets the current solid fill alpha.
Parameters
- value: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:292

setFillColor

setFillColor(value: null | string): void
Sets the current fill color.
Parameters
- value: null | string
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:306

setFontBackgroundColor

setFontBackgroundColor(value: null | string): void
Sets the current font background color.
Parameters
- value: null | string
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:393

setFontBorderColor

setFontBorderColor(value: null | string): void
Sets the current font border color.
Parameters
- value: null | string
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:400

setFontColor

setFontColor(value: null | string): void
Sets the current font color.
Parameters
- value: null | string
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:386

setFontFamily

setFontFamily(value: string): void
Sets the current font family.
Parameters
- value: string
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:414

setFontSize

setFontSize(value: number): void
Sets the current font size.
Parameters
- value: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:407

setFontStyle

setFontStyle(value: number): void
Sets the current font style.
Parameters
- value: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:421

setGradient

setGradient(
    color1: string,
    color2: string,
    x: number,
    y: number,
    w: number,
    h: number,
    direction: DirectionValue,
    alpha1?: number,
    alpha2?: number,
): void
Sets the current gradient.
Parameters
- color1: string
- color2: string
- x: number
- y: number
- w: number
- h: number
- direction: DirectionValue
- alpha1: number = 1
- alpha2: number = 1
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:314

setLineCap

setLineCap(value: string): void
Sets the current line cap.
Parameters
- value: string
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:365

setLineJoin

setLineJoin(value: string): void
Sets the current line join.
Parameters
- value: string
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:372

setLink

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

setMiterLimit

setMiterLimit(value: number): void
Sets the current miter limit.
Parameters
- value: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:379

setShadow

setShadow(enabled: boolean): void
Enables or disables and configures the current shadow.
Parameters
- enabled: boolean
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:428

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
- Defined in view/canvas/AbstractCanvas2D.ts:446

setShadowColor

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

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
- Defined in view/canvas/AbstractCanvas2D.ts:456

setStrokeAlpha

setStrokeAlpha(value: number): void
Sets the current stroke alpha.
Parameters
- value: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:299

setStrokeColor

setStrokeColor(value: null | string): void
Sets the current stroke color.
Parameters
- value: null | string
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:336

setStrokeWidth

setStrokeWidth(value: number): void
Sets the current stroke width.
Parameters
- value: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:343

`Abstract`stroke

stroke(): void
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:555

`Abstract`text

text(
    x: number,
    y: number,
    w: number,
    h: number,
    str: string,
    align: AlignValue,
    valign: VAlignValue,
    wrap: boolean,
    format: string,
    overflow: OverflowValue,
    clip: boolean,
    rotation: number,
    dir: TextDirectionValue,
): void
Parameters
- x: number
- y: number
- w: number
- h: number
- str: string
- align: AlignValue
- valign: VAlignValue
- wrap: boolean
- format: string
- overflow: OverflowValue
- clip: boolean
- rotation: number
- dir: TextDirectionValue
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:585

translate

translate(dx: number, dy: number): void
Translates the current state.
Parameters
- dx: number
- dy: number
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:270

`Abstract`updateText

updateText(
    x: number,
    y: number,
    w: number,
    h: number,
    align: AlignValue,
    valign: VAlignValue,
    wrap: boolean,
    overflow: OverflowValue,
    clip: boolean,
    rotation: number,
    node: SVGElement,
): void
Parameters
- x: number
- y: number
- w: number
- h: number
- align: AlignValue
- valign: VAlignValue
- wrap: boolean
- overflow: OverflowValue
- clip: boolean
- rotation: number
- node: SVGElement
Returns void
- Defined in view/canvas/AbstractCanvas2D.ts:601

Class AbstractCanvas2DAbstract

Hierarchy (View Summary)

Index

Constructors

Properties

Methods

Constructors

Protectedconstructor

Returns AbstractCanvas2D

Properties

closeOp

converter

curveOp

lastX

lastY

lineOp

moveOp

path

pointerEvents

pointerEventsValue

quadOp

rotateHtml

state

states

Methods

addOp

Parameters

Returns void

arcTo

Parameters

Returns void

begin

Returns void

close

Parameters

Returns void

createState

Returns CanvasState

createUrlConverter

Returns UrlConverter

curveTo

Parameters

Returns void

Abstractellipse

Parameters

Returns void

Abstractend

Returns void

Abstractfill

Returns void

AbstractfillAndStroke

Returns void

format

Parameters

Returns number

Abstractimage

Parameters

Returns void

lineTo

Parameters

Returns void

moveTo

Parameters

Returns void

quadTo

Parameters

Returns void

Abstractrect

Parameters

Returns void

reset

Returns void

restore

Returns void

rotate

Parameters

Returns void

rotatePoint

Parameters

Returns Point

Class AbstractCanvas2D`Abstract`

`Protected`constructor

`Abstract`ellipse

`Abstract`end

`Abstract`fill

`Abstract`fillAndStroke

`Abstract`image

`Abstract`rect

`Abstract`roundrect