ionic 根据方向调整画布大小

Question

我对编程还很陌生，我一直在按照本教程在 Ionic 中制作一个简单的绘图应用程序。

我按照教程进行操作并能够使其工作。但是，当我使用离子服务和响应设备模式在浏览器上测试它时，画布在更改方向时开始绘制后不会调整。我开始在纵向视图中绘画，然后当我翻转方向或横向并再次开始绘画时，我可以清楚地看到画布的截止点。

我已附上屏幕截图和下面的代码。

canvas-draw.html

<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>
  </ion-buttons>
</ion-toolbar>

<canvas #myCanvas (touchstart)="handleStart($event)" (touchmove)="handleMove($event)" (touched)="handleEnd($event)"></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>

canvas-draw.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CanvasDraw } from './canvas-draw';

@NgModule({
  declarations: [
    CanvasDraw,
  ],
  imports: [
    IonicPageModule.forChild(CanvasDraw),
  ],
  exports: [
    CanvasDraw
  ]
})
export class CanvasDrawComponentModule {}

canvas-draw.scss

canvas-draw {
    height: 100%;
    width: 100%;
    display: block;
    #top-toolbar{
        position: absolute;
        top: 0;
    }
    #bottom-toolbar{
        position: absolute;
        bottom: 0;
    }
}

canvas-draw.ts

import { Component,ViewChild,Renderer } from '@angular/core';
import { Platform } from 'ionic-angular';

@Component({
  selector: 'canvas-draw',
  templateUrl: 'canvas-draw.html'
})
export class CanvasDraw {
    @ViewChild('myCanvas') canvas: any;

    canvasElement: any;
    lastX: number;
    lastY: number;

    currentColour: string = '#1abc9c';
    availableColours: any;

    brushSize: number = 10;

    constructor(public platform: Platform, public renderer: Renderer) {
        console.log('Hello CanvasDraw Component');

        this.availableColours = [
            '#1abc9c',
            '#3498db',
            '#9b59b6',
            '#e67e22',
            '#e74c3c'
        ];

    }

    ngAfterViewInit(){

        this.canvasElement = this.canvas.nativeElement;

        this.renderer.setElementAttribute(this.canvasElement, 'width', this.platform.width() + '');
        this.renderer.setElementAttribute(this.canvasElement, 'height', this.platform.height() + '');

    }

    changeColour(colour){
        this.currentColour = colour;
    }

    changeSize(size){
        this.brushSize = size;
    }

    handleStart(ev){

        this.lastX = ev.touches[0].pageX;
        this.lastY = ev.touches[0].pageY;
    }

    handleMove(ev){

        let ctx = this.canvasElement.getContext('2d');
        let currentX = ev.touches[0].pageX;
        let currentY = ev.touches[0].pageY;

        ctx.beginPath();
        ctx.lineJoin = "round";
        ctx.moveTo(this.lastX, this.lastY);
        ctx.lineTo(currentX, currentY);
        ctx.closePath();
        ctx.strokeStyle = this.currentColour;
        ctx.lineWidth = this.brushSize;
        ctx.stroke();       

        this.lastX = currentX;
        this.lastY = currentY;

    }

    handleEnd(ev){

        console.log(ev);
    }

    clearCanvas(){
        let ctx = this.canvasElement.getContext('2d');
        ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);   
    }

}

截图

首先，我以纵向视图进行绘画。

然后翻转方向，我继续绘画，但你可以看到画布被切断的地方。

Answer 1

所以我将以下代码添加到 ngAfterViewInit 中，并且能够在方向改变时调整画布大小而没有任何截止，但是绘图被删除，所以我仍然想知道是否有一种方法可以保留绘图.

window.addEventListener("resize", (e) => {
    this.canvasElement.width = window.innerWidth;
    this.canvasElement.height = window.innerHeight;

Answer 2

感谢您的解决方案。我还解决了旋转后图像数据丢失的问题。

  // Resize the canvas element after device rotation change
  window.addEventListener("resize", (e) => {
    // Change canvasElement dimentions will clear the image.
    // The iamge data must be preserved and restored at the end.
    var imageDataToPreserve = this.canvasElement.toData();

    this.canvasElement.width = window.innerWidth;
    this.canvasElement.height = window.innerHeight;

    this.canvasElement.fromData(imageDataToPreserve);
  });