tutosh-whiteboard v0.0.68
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:)
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago