Ionic 3 Angular 4 Cordova不能在画布上画任何东西

Question

我正在开发一个图像编辑器应用程序。其中，为用户在画布上绘制任何内容提供了便利。当前使用图像作为画布的背景。即使从画布上删除了图像，我也无法在视图中绘制任何内容。下面我提供了我的代码，任何解决方案都是可观的。

1. image-home.html

<ion-header>
<ion-navbar>
<ion-title>image-home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding no-bounce>
<canvas (touchstart)='handleMove($event)' (touchmove)='handleMove($event)' [ngStyle]="{'background': '#fff url('  + selectedImage + ') no-repeat 0 0'}" #canvas ></canvas>
</ion-content>

<ion-tabs>
<ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="chat"></ion-tab>
<ion-tab [root]="chatRoot" tabTitle="Edit" tabIcon="chat"></ion-tab>
</ion-tabs>

2. image-home.scss

page-image-home {
.tabbar {
opacity: 1 !important;
}
.selectedImage{
height: 80%;
}
canvas {
height: 100%;
width: 100%;
display: block;
background-size: contain;
background-position: center;
border: 1px solid #000;
}
#top-toolbar{
position: absolute;
top: 0;
}
#bottom-toolbar {
position: absolute;
bottom: 0;
}
}

3. image-home.ts

import { Component, ViewChild,  ElementRef, Input} from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs';
/**
* Generated class for the ImageHomePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-image-home',
templateUrl: 'image-home.html',
})
export class ImageHomePage {
@ViewChild('canvas') public canvas: ElementRef;
@Input() public width = 400;
@Input() public height = 400;
private cx: CanvasRenderingContext2D;  
selectedImage = "";
lastX: number;
lastY: number;
currentColour: string = '#1abc9c';
availableColours: any;
brushSize: number = 10;

constructor(public navCtrl: NavController, public navParams: NavParams) {
this.selectedImage = this.navParams.get('id');
}
ionViewDidLoad() {
// this.selectedImage = this.route.snapshot.params['id'];
console.log('ionViewDidLoad ImageHomePage');
const canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
this.cx = canvasEl.getContext('2d');
// set the width and height
canvasEl.width = this.width;
canvasEl.height = this.height;
// set some default properties about the line
this.cx.beginPath();
this.cx.moveTo(50, 10);
this.cx.lineTo(10, 70);
this.cx.lineTo(90, 70);
this.cx.fill();
}

handleStart(ev){
this.lastX = ev.touches[0].pageX;
this.lastY = ev.touches[0].pageY;
}
handleMove(ev){
const canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
this.cx = canvasEl.getContext('2d');
let currentX = ev.touches[0].pageX;
let currentY = ev.touches[0].pageY;
this.cx.beginPath();
this.cx.lineJoin = "round";
this.cx.moveTo(this.lastX, this.lastY);
this.cx.lineTo(currentX, currentY);
this.cx.closePath();
this.cx.strokeStyle = this.currentColour;
this.cx.lineWidth = this.brushSize;
this.cx.stroke();      
this.lastX = currentX;
this.lastY = currentY;
}

}

Answer 1

更改此

<canvas (touchstart)='handleMove($event)' ...

至

<canvas (touchstart)='handleStart($event)' ...

如果它仍然不起作用。看看这个链接：

https://www.joshmorony.com/creating-a-drawing-application-in-ionic/