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-whiteboardvia:yarn add ng-whiteboard --save
or
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);
}Contributing
The project is open for contributors! Please file an issue or make a PR:)