Question

我正在用不同笔刷大小和颜色的画布上绘画。目前能够在画布上绘制。但是在撤消操作时无法正常工作。单击“撤消”后，Canvas最初会变得很清晰，但是剩余的循环无法正常工作。正如我检查的那样，它正在遍历整个循环，获得适当的值，但没有在画布上绘制。如果有人可以帮助，将是可观的。

image-home.html

MailMessage

image-home.ts

<ion-header>

  <ion-navbar>
    <ion-title>image-home</ion-title>
  </ion-navbar>

</ion-header>

<ion-toolbar id="top-toolbar">
    <ion-buttons left>
        <button *ngFor="let colour of availableColours" icon-only ion-button (click)="changeColour(colour)">
            <ion-icon [style.color]="colour" name="brush"></ion-icon>
        </button>
    </ion-buttons>
    <ion-buttons right>
        <!--<button style="border: 1px solid #cecece;" ion-button icon-only style.color="#fff" (click)="changeColour('#fff')">
            <ion-icon style="color: #fff;" name="square"></ion-icon>
        </button>-->
        <button ion-button round (click)="undo()">Undo</button>
        <button ion-button round (click)="saveImage()">Save</button>
    </ion-buttons>
</ion-toolbar>



<canvas width="400" height="400" (touchstart)='handleStart($event)' (touchmove)='handleMove($event)' [ngStyle]="{'background': '#fff url(' + selectedImage + ') no-repeat 0 0', 'background-size' : 'contain',
'background-position': 'center'}" #canvas ></canvas>

    <!--<canvas #myCanvas (touchstart)="handleStart($event)" (touchmove)="handleMove($event)"></canvas> -->
  <!--<img [src] = "selectedImage" class="selectedImage"/> -->
  <!--<canvas (touchstart)='handleStart($event)' (touchmove)='handleMove($event)' [ngStyle]="{'background': '#fff url(' + selectedImage + ') no-repeat 0 0'}" #canvas ></canvas>-->


<ion-toolbar id="bottom-toolbar">
    <ion-buttons left>
        <button color="dark" ion-button icon-only (click)="clearCanvas()"><ion-icon name="trash"></ion-icon></button>
    </ion-buttons>
    <ion-buttons right>
        <button color="dark" ion-button icon-only (click)="changeSize(5)"><ion-icon style="font-size: 0.25em;" name="radio-button-on"></ion-icon></button>
        <button color="dark" ion-button icon-only (click)="changeSize(10)"><ion-icon style="font-size: 0.5em;" name="radio-button-on"></ion-icon></button>
        <button color="dark" ion-button icon-only (click)="changeSize(20)"><ion-icon style="font-size: 1em;" name="radio-button-on"></ion-icon></button>
        <button color="dark" ion-button icon-only (click)="changeSize(50)"><ion-icon style="font-size: 2em;" name="radio-button-on"></ion-icon></button>
        <button color="dark" ion-button icon-only (click)="changeSize(200)"><ion-icon style="font-size: 3em;" name="radio-button-on"></ion-icon></button>
    </ion-buttons>
  </ion-toolbar>

在这里，我使用points变量作为数组来存储绘制坐标。撤消时，最初我弹出数组的最后一个元素，并清除画布以再次绘制其余路径。但是目前，画布已经变得清晰，但是重绘无法正常工作。需要帮助以在画布上重画线路径。

谢谢。

Angular 4-画布撤消不起作用

0 个答案: