Lorsque vous réalisez par exemple un canvas dans Ionic, vous devez gérer les événement souris et touch (souris pour le développement et touch pour la production), malheureusement ce n’est pas trivial, s’il est assez facile de détecter la position de la souris, cela demande un peu plus de travail avec le touch (encore que vous le sachiez !)
Les événements touch
Soit le code du canvas suivant par exemple dans Ionic
<canvas #imageCanvas (mousedown)="startDrawing($event)" (touchstart)="startDrawing($event)" (mousemove)="moved($event)" (touchmove)="moved($event)" (mouseup)="endDrawing()" (touchend)="endDrawing()" ></canvas>
Il faut dans un premier temps détecter le type d’événement. L’image ci dessous est un dump de l’objet événement touchstart
Comme vous le voyez les variables de position ne sont pas au même endroit ! pensez-y
Eviter le scroll sur mobile
Si vous développez pour une application mobile, comme Ionic, vous aurez sans doute le problème du scroll quand vous dessinez, l’écran va scroller et c’est gênant. Ce qu’il faut faire c’est d’empêcher l’événement de se propager
this.canvasElement.addEventListener("touchstart", function(event) {event.preventDefault()})
this.canvasElement.addEventListener("touchmove", function(event) {event.preventDefault()})
this.canvasElement.addEventListener("touchend", function(event) {event.preventDefault()})
this.canvasElement est l’élément Canvas que vous avez en variable.