ng-whiteboard
v3.1.1
Published
Angular whiteboard component
Downloads
1,143
Maintainers
Readme
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
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:)