Funktioniert die Leinwandzeichnung in Ionic 2?

Question

Ich benutze derzeit eine html5 Leinwand und indem ich ionic 2 (tap) = "markPoint ($ event)" auf der Leinwand in html, bekomme ich die Position des Tap-Ereignisses. Unten ist die Funktion, die die Marke platzieren soll:

public markPoint(event) { 
    var position = event.center; 
    let ctx = this.canvas.getContext('2d'); 
    ctx.beginPath(); 
    ctx.arc(position.x, position.y, 20, 0, 2 * Math.PI); 
    ctx.fillStyle = '#00DD00'; 
    ctx.fill(); 
} 

Ich gründe die Leinwand wie so, wo Leinwand die ID in dem HTML-Code festgelegt ist:

this.canvas = document.getElementById('canvas'); 

Ich sehe nicht ein Problem mit Dieser Code, aber ich bin mir auch nicht sicher, ob dies der beste Weg ist, Marken in einer Anwendung in ionic 2 zu machen. Wissen Sie, ob das funktionieren sollte, und wenn nicht warum? Auch wenn es bessere Wege gäbe, wäre es toll hier zu sein.

Answer 1

Zuerst müssen wir mehr Typoskript < 6> freundlich machen. Es reicht nicht aus, das Canvas-Objekt wie ein anderes HTML-Element mithilfe der ID zu erhalten. In diesem Fall sollten wir ein wenig helfen, so meine erste Änderung wird:

this.canvas = document.getElementById('canvas'); 

FOR =>

this.canvas = <HTMLCanvasElement>document.getElementById('canvas'); 

Dann wird Ihre Funktion wie folgt aussehen:

public markPoint(event) { 
    var position = event.center; 
    let ctx: CanvasRenderingContext2D = this.canvas.getContext("2d"); 
    ctx.beginPath(); 
    ctx.arc(position.x, position.y, 20, 0, 2 * Math.PI); 
    ctx.fillStyle = '#00DD00'; 
    ctx.fill(); 
} 

Hoffnung diese Hilfe.