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

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: string | null = 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:199

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

begin

begin(): void
Starts a new path.

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

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

createState

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

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

createUrlConverter

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

Returns UrlConverter
- Defined in view/canvas/AbstractCanvas2D.ts:136

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

`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:567

`Abstract`end

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

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

`Abstract`fill

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

`Abstract`fillAndStroke

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

format

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

`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:569

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

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

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

`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:556

reset

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

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

restore

restore(): void
Restores the current state.

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

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

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

`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:558

save

save(): void
Saves the current state.

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

scale

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

setAlpha

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

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

setDashPattern

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

setFillAlpha

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

setFillColor

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

setFontBackgroundColor

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

setFontBorderColor

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

setFontColor

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

setFontFamily

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

setFontSize

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

setFontStyle

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

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

setLineCap

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

setLineJoin

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

setLink

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

setMiterLimit

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

setShadow

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

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

setShadowColor

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

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

setStrokeAlpha

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

setStrokeColor

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

setStrokeWidth

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

`Abstract`stroke

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

`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:580

translate

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

`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:596

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