イオン性キャンバスのサイズはオリエンテーションに基づいて調整します

Question

私はプログラミングには新しく、Ionicで簡単な描画アプリケーションを作成するためのチュートリアルに従っています。

私はチュートリアルに続き、それを動作させることができました。しかし、私がブラウザ上でionic serveとresponsive deviceモードを使ってテストすると、向きを変えるときに描画を開始した後にキャンバスが調整されません。私は肖像画の図で描き始めます。そして、向きや景色を反転して再び描き始めたら、キャンバスのカットオフ点をはっきりと見ることができます。

以下のスクリーンショットとコードを添付しました。

キャンバス-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> 

キャンバス-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 {} 

キャンバス-draw.scss

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

キャンバス-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;