Angular Usage
app.component.html#
<div>
<button (click)="clear()">Clear</button>
<button (click)="undo()">Undo</button>
<button (click)="redo()">Redo</button>
<button (click)="toggleEdit()">
{{ active ? "save" : "edit" }}
</button>
<button (click)="toggleUseEraser()">
{{ useEraser ? "use pencil" : "use eraser" }}
</button>
<input type="color" [(ngModel)]="color" />
<input type="range" [(ngModel)]="thickness" min="{1}" max="{30}" step="{1}" />
<paintable
#paintable
[width]="1024"
[height]="768"
[active]="active"
[useEraser]="useEraser"
[thickness]="thickness"
[smooth]="smooth"
[color]="color"
[image]="image"
(onSave)="onSave($event)"
(onLongPress)="onLongPress()"
>
<div class="canvas-inner">test</div>
</paintable>
</div>
app.component.ts#
import { Component, ViewChild } from '@angular/core';
import { PaintableComponent } from 'paintablejs/angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
@ViewChild(PaintableComponent)
paintable: PaintableComponent;
active = false;
useEraser = false;
thickness = 5;
color = '#FF0000';
clear() {
this.paintable?.clear();
}
undo() {
this.paintable?.undo();
}
redo() {
this.paintable?.redo();
}
toggleEdit() {
this.useEraser = false;
this.active = !this.active;
}
toggleUseEraser() {
this.useEraser = !this.useEraser;
}
get image() {
return localStorage.getItem('/') || undefined;
}
onSave(image: string) {
localStorage.setItem('/', image);
}
onLongPress() {
console.log('longpress');
}
}
app.module.ts#
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { PaintableModule } from 'paintablejs/angular';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule, PaintableModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}