ng2-canvas-whiteboard не работает в Angular7.3.5 - PullRequest
0 голосов
/ 18 апреля 2019

Я следовал инструкции по установке пакета 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>
...