Détecter dans le canvas (ou sur l’écran) la position du touch dans Ionic

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.

Vous aimerez aussi...