Ng-whiteboard NPM

ng-whiteboard

Lightweight angular whiteboard

Demo

https://mostafazke.github.io/ng-whiteboard

Features

Supports touch.
Highly Customizable.
Lightweight.
Easy to use.
Custom colors.
Custom background colors.
(Brush | Image | Line | Rect | Ellipse | Text | Eraser) Tools.
Custom stroke size.
Save drawn as (svg | png | jpeg | base64) images.
Undo - Redo.

And more to come...

Installation

Install ng-whiteboard via:

yarn add ng-whiteboard --save

npm install ng-whiteboard --save

Add the module to your project

import { NgWhiteboardModule } from 'ng-whiteboard';
...

@NgModule({
    imports: [
        ...
        NgWhiteboardModule
    ]
    ...
)}

Insert the Whiteboard Component element in the html.
```
<ng-whiteboard></ng-whiteboard>
```

Options

Input	Type	Default	Description
data	[WhiteboardElement]	[]	The whiteboard data
options	WhiteboardOptions	null	component configuration object, properties described below
drawingEnabled	boolean	true	Enable mouse/touch interactions
selectedTool	ToolsEnum	ToolsEnum.BRUSH	The current selected tool
canvasWidth	number	800	The width of whiteboard canvas
canvasHeight	number	600	The height of whiteboard canvas
fullScreen	boolean	true	if true change (canvasWidth, canvasHeight) to fit the parentainer
strokeColor	string	#000000	The default stroke color
backgroundColor	string	#FFFFFF	The default background color
fill	string	#333333	The default fill color
strokeWidth	number	2	The default stroke width
zoom	number	1	Zoom level
fontFamily	string	sans-serif	The default font family
fontSize	number	24	The default font size
center	boolean	true	Center the canvas in parent component, works with fullScreen: false
x	number	0	if center is false, set the X axis
y	number	0	if center is false, set the Y axis
enableGrid	boolean	false	Enable the grid pattern
gridSize	number	10	Set the grid inner boxes size
snapToGrid	boolean	false	Enable snaping to grid
lineJoin	LineJoinEnum .ROUND	LineJoinEnum	The default Line join
lineCap	LineCapEnum .ROUND	LineCapEnum	The default Line cap
dasharray	string	''	The default dash-array
dashoffset	number	0	The default dash-offset

Outputs

Name	Description	Arguments
(ready)	Emitted when the component is ready	None
(dataChange)	Emitted when the data is changed	WhiteboardElement[]
(clear)	Emitted when the canvas is cleared	None
(undo)	Emitted when the user undo an action	None
(redo)	Emitted when the user redo an action	None
(imageAdded)	Emitted when the user add an image to the canvas	None
(save)	Emitted when the user save the canvas	base64 image
(selectElement)	Emitted when the user select/deselect an element	WhiteboardElement / null
(deleteElement)	Emitted when the user delete an element	WhiteboardElement
(toolChanged)	Emitted when the user change the tool	ToolsEnum

Methods

Name	Description	Arguments	Defaults
save	Save the current board	format: string, name: string	format: 'base64', name: 'New board'
addImage	Add images to the board	image: (string; ArrayBuffer)	None
erase	Clean the whiteboard	None	None
undo	Undo last action	None	None
redo	Redo last action	None	None

to use these Methods inject NgWhiteboardService in your project

import { NgWhiteboardService, FormatType } from 'ng-whiteboard';
...

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
   ...
)}

  constructor(private whiteboardService: NgWhiteboardService) {
   this.whiteboardService.save(FormatType.Base64);
  }