我对编程很陌生,而且我一直在按照本教程在Ionic中制作一个简单的绘图应用程序。
我按照教程进行了操作。然而,当我使用离子发送和响应设备模式在我的浏览器上测试它时,在更改方向后开始绘制后画布不会调整。我开始绘制纵向视图,然后当我翻转方向或横向并再次开始绘制时,我可以清楚地看到画布的截断点。
我附上了截图和下面的代码。
画布-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);
}
}
截图
首先我画的是纵向视图。
然后翻转方向并继续绘制,但您可以看到画布被切除的位置。
答案 0 :(得分:0)
所以我将以下代码添加到ngAfterViewInit,并且当方向改变时没有任何截止时能够调整画布大小,但是绘图被删除了,所以我仍然想知道是否有一种保持方式图纸。
window.addEventListener("resize", (e) => {
this.canvasElement.width = window.innerWidth;
this.canvasElement.height = window.innerHeight;