Actualmente estoy tratando de obtener un comportamiento táctil/stylus similar al de Squid (la aplicación para tomar notas). Utilicé la API PointerEvent y todo funciona, excepto por un problema molesto: después de dejar el lápiz óptico o el dedo, dibuja un trazo durante los siguientes ~0.3 segundos, pero después de eso, no se activan más eventos pointermove mientras como el puntero está hacia abajo.
aquí está mi código:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Draw</title> <link rel="stylesheet" href="index.css"> </head> <body> <canvas id="canvas" width="500px" height="500px" style=" position: absolute;border: 2px solid red;"></canvas> <script src="index.js"></script> </body> </html> index.js
var canvas = document.querySelector("#canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "white" var pos = {} canvas.addEventListener("pointerdown", function (e) { pos.x = e.pageX; pos.y = e.pageY; }); canvas.addEventListener("pointermove", function (e) { console.log(e.pressure) switch (e.pointerType) { case "pen": ctx.beginPath(); ctx.moveTo(pos.x, pos.y); ctx.lineTo(e.pageX, e.pageY); ctx.stroke(); pos.x = e.pageX; pos.y = e.pageY; break; case "touch": ctx.fillRect(e.pageX - 10, e.pageY - 10, 20, 20); break; } }); index.css es solo un reinicio de css
Estoy realmente confundido sobre esto y parece que no puedo encontrar a nadie más que haya tenido este problema. ¡Cualquier ayuda sería apreciada!
Simplemente agregue touch-action: none; al atributo de estilo de su lienzo.
Después de ~0,3 segundos, se inician los eventos táctiles a medida que se desplaza la página.