Class Board

Board class create and controls the main canvas and manages the shapes in the workspace

Constructors

constructor

Properties

activeDrawing background container events groups history layer selection settings stage

Accessors

activeShapes shapes

Methods

addShape draw gc getContainerTransform getDimensions getNodes removeShape rescale setActiveDrawing setShapes

Constructors

constructor

  • new Board(settings, events, history): Board

  • Creates a new stage, layer, background and selection instance

    Parameters

    Returns Board

Properties

activeDrawing

activeDrawing: null | string = null

Demonstrates the current active drawing. it's a string value or null.

This property is managing by [[ShapeDrawer]] directly

Readonly background

background: Background

The background of main layer that contains image and overlay

Remark

Background component is a not selectable shape that represents Image and Rect nodes. The nodes are accessible with background.image and background.overlay APIs

See

[[https://konvajs.org/api/Konva.Image.html | Image]] and [[ https://konvajs.org/api/Konva.Rect.html | Rect]]

Example

editor.board.background.setImageFromUrl('<url>')

Example

editor.board.background.fill('rgba(0, 0, 0, 0.5)')

Example

editor.board.background.filter({
 name: 'Blur',
 options: {
   blurRadius: 20
 }
})

Readonly container

container: undefined | HTMLDivElement

The html container element which the editor renders into that

Readonly events

events: Events

See

[[Events]]

Readonly groups

groups: Groups

See

[[Groups]]

Readonly history

history: History

See

[[History]]

Readonly layer

layer: Layer

The main layer that contains all shapes and transformers

See

[[https://konvajs.org/api/Konva.Layer.html | Layer]]

Readonly selection

selection: Selection

The selection manager components that lets select and manage shapes with UI or API

Example

Selects all shapes

editor.board.selection.selectAll()

Example

Deselects all shapes

editor.board.selection.deselectAll()

Readonly settings

settings: Partial<BaseSettings>

The settings

Readonly stage

stage: Stage

The stage that contains all layers

See

[[https://konvajs.org/api/Konva.Stage.html | Stage]]

Accessors

activeShapes

  • get activeShapes(): ShapeModel<Shape<ShapeConfig> | Group, ShapeConfig>[]

  • Returns all created shapes except deleted and hidden shpaes

    Returns ShapeModel<Shape<ShapeConfig> | Group, ShapeConfig>[]

    See

    [[ShapeModel]]

shapes

  • get shapes(): ShapeModel<Shape<ShapeConfig> | Group, ShapeConfig>[]

  • Returns all created shapes

    Returns ShapeModel<Shape<ShapeConfig> | Group, ShapeConfig>[]

    See

    [[ShapeModel]]

Methods

addShape

  • addShape(shape): void

  • Adds a new shape to the list of the shapes

    Parameters

    • shape: ShapeModel<Shape<ShapeConfig> | Group, ShapeConfig>

    Returns void

draw

  • draw(): void

  • Redraws the main layer

    Returns void

gc

  • gc(): void

  • Deletes all removed shapes in order to free up memory

    Returns void

getContainerTransform

  • getContainerTransform(): undefined | string

  • Calculates the CSS transformations of board based on stage width and height

    Returns undefined | string

    transform style of the container

getDimensions

  • getDimensions(): {
        height: number;
        width: number;
    }

  • Calculates the board dimensions based on different components

    Returns {
        height: number;
        width: number;
    }

    [[Dimension]]

    • height: number
    • width: number

getNodes

  • getNodes(): (Shape<ShapeConfig> | Group)[]

  • Returns all nodes in the main layer including background nodes

    Returns (Shape<ShapeConfig> | Group)[]

    array of [[ShapeModel.node]]

removeShape

  • removeShape(shape): void

  • Removes a shape from the list of the shapes

    Parameters

    • shape: ShapeModel<Shape<ShapeConfig> | Group, ShapeConfig>

    Returns void

rescale

  • rescale(): void

  • Rescales the container based on its width and height

    Returns void

setActiveDrawing

  • setActiveDrawing(drawType): void

  • Changes the active drawing mode

    Parameters

    • drawType: null | string

      The drawing type string

    Returns void

setShapes

  • setShapes(shapes): void

  • Updates list of the shapes

    Parameters

    • shapes: ShapeModel<Shape<ShapeConfig> | Group, ShapeConfig>[]

    Returns void

Settings

Member Visibility

Theme

On This Page

constructoractiveDrawingbackgroundcontainereventsgroupshistorylayerselectionsettingsstageactiveShapesshapesaddShapedrawgcgetContainerTransformgetDimensionsgetNodesremoveShaperescalesetActiveDrawingsetShapes