Features:
And more to come…
Install npm module:
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>
Input | Type | Default | Required | Description |
---|---|---|---|---|
[color] | string |
#000000 |
no | Set brush color |
[backgroundColor] | string |
#ffffff |
no | Set whiteboard background color |
[size] | string |
5px |
no | Set brush size |
[linejoin] | string |
round |
no | Define the shape of two lines when joined together (‘miter’ , ‘round’ , ‘bevel’ , ‘miter-clip’ , ‘arcs’) |
[linecap] | string |
round |
no | Define start and end shape of line (‘butt’, ‘square’ , ‘round’) |
[whiteboardOptions] | WhiteboardOptions |
no | Object of all inputs |
Name | Description |
---|---|
(init) | Fired on Component initialize |
(save) | Fired on Saving, include base64 |
(clear) | Fired on clearing |
(erase) | Fired on Cleaning |
(undo) | Fired on undoing last draw |
(redo) | Fired on Repainting last draw |
Name | ARGS | Defaults | Description |
---|---|---|---|
save | [name]: string, [format]: string | [name]: ‘New image’, [format]: ‘png’ | Save current board |
erase | null | null | Clean the whiteboard |
undo | null | null | Undo last line |
redo | null | null | Repaint last line |
addImage | image: (string; ArrayBuffer) | null | add images to the board |
to use these Methods inject NgWhiteboardService in your project
import { NgWhiteboardService } from 'ng-whiteboard';
...
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
...
)}
constructor(private whiteboardService: NgWhiteboardService) {
this.whiteboardService.save();
}
The project is open for contributors! Please file an issue or make a PR:)
Author: mostafazke
Live Demo: https://mostafazke.github.io/ng-whiteboard/
GitHub: https://github.com/mostafazke/ng-whiteboard
#angular #javascript #angularjs