Я следовал инструкции по установке пакета ng2-canvas-whiteboard, но у меня пустая страница.
Вот что я сделал:
IN Модуль:
import { CanvasWhiteboardModule } from 'ng2-canvas-whiteboard';
@NgModule({
imports: [
CanvasWhiteboardModule,
]
В компоненте:
import { CanvasWhiteboardComponent, CanvasWhiteboardOptions, CanvasWhiteboardUpdate } from 'ng2-canvas-whiteboard';
viewProviders: [CanvasWhiteboardComponent],
@ViewChild('canvasWhiteboard') canvasWhiteboard: CanvasWhiteboardComponent;
public canvasOptions: CanvasWhiteboardOptions;
ngOnInit() {
this.canvasOptions = {
drawButtonEnabled: true,
drawButtonClass: "drawButtonClass",
drawButtonText: "Draw",
clearButtonEnabled: true,
clearButtonClass: "clearButtonClass",
clearButtonText: "Clear",
undoButtonText: "Undo",
undoButtonEnabled: true,
redoButtonText: "Redo",
redoButtonEnabled: true,
colorPickerEnabled: true,
saveDataButtonEnabled: true,
saveDataButtonText: "Save",
lineWidth: 5,
strokeColor: "rgb(0,0,0)",
shouldDownloadDrawing: true
};
}
sendBatchUpdate(updates: CanvasWhiteboardUpdate[]) {
console.log(updates);
}
onCanvasClear() {
console.log("The canvas was cleared");
}
onCanvasUndo(updateUUID: string) {
console.log(`UNDO with uuid: ${updateUUID}`);
}
onCanvasRedo(updateUUID: string) {
console.log(`REDO with uuid: ${updateUUID}`);
}
В HTML:
<div style="height: 400px; border: 1px solid black">
<canvas-whiteboard #canvasWhiteboard
[options]="canvasOptions"
(onBatchUpdate)="onCanvasDraw($event)"
(onClear)="onCanvasClear()"
(onUndo)="onCanvasUndo($event)"
(onRedo)="onCanvasRedo($event)">
</canvas-whiteboard>
</div>