我目前正在尝试获得与Squid(笔记应用程序(类似的触摸/手写笔行为。我已经使用了PointerEventAPI，除了一个令人讨厌的问题外，它一切正常：在我放下手写笔或手指后，它会在接下来的0.3秒内绘制笔划，但在那之后，只要指针放下，就不会再触发pointermove事件。
这是我的代码：
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只是一个css重置
我真的很困惑，似乎找不到其他有这个问题的人了。任何帮助都将不胜感激！
只需将touch-action: none;添加到画布的样式属性中。
大约0.3秒后，开始触摸事件作为页面滚动。