3

Tengo este fragmento de código:

<script>
window.onload = function () {
    var box = document.querySelector('canvas');
    box.addEventListener('touchmove', function (e) {
        console.log('move');
        console.log(e);
    })
}
</script>

<canvas width="500" height="500"></canvas>

pero quiero una forma de saber hacia qué lado está dirigido el touch. Como está al presionar los botones con flechas:

window.onload = function () {
    window.onkeydown = function (e) {
        console.log(e.key)
    };
}

Como le hago?

1

1 respuesta 1

1

Necesitas guardar la posición de los eventos previos para obtener vectores: Si la posición actual es (18,10) y la anterior era (5,5), puedes calcular cuánto se ha movido (el módulo del vector) y en que dirección o ángulo)

let canvas = document.querySelector('canvas');
let previousTouch={x:0,y:0};
canvas.addEventListener('touchmove', function (e) {
    const touch = e.changedTouches[0];
    console.log(`moved from (${previousTouch.x},${previousTouch.y}) to (${touch.clientX},${touch.clientY})`);
    previousTouch.x=touch.clientX;
    previousTouch.y=touch.clientY;
});
canvas {
  border: solid 1px;
}
<canvas width="500" height="500"></canvas>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.