Web-如何区分手指触摸和手写笔触摸？

Question

我正在尝试制作绘图网络应用。我想用手写笔绘图，并用手移动画布。如何区分这两个？

我在MDN官方文档中没有发现任何有希望的东西。

Answer 1

您可以通过捕获PointerEvent并检查其宽度和高度属性（代表笔尖的大小）来确定是通过手指还是手写笔进行触摸。

手写笔的宽度和高度通常比手指小。

---

训练应用程序以识别手指和手写笔

由于笔尖大小可能会在屏幕，手指和笔之间变化，因此可能的策略是让用户训练应用程序以识别不同类型的触摸：

“这是一个手指”命令，然后多次手指触摸，直到该应用程序具有足够的大小样本为止。

“这是一个手写笔”命令，然后进行几次手写笔触摸。

PointerEvent interface上的MDN。

Demo that shows stylus (or finger) tip size of every screen touch。

这将显示触摸的笔尖大小或在屏幕上单击：

let counter = 0;
// listen for 'pointerdown' events, detect tip size
window.addEventListener('pointerdown', (evt) => {
  const w = Number(evt.width).toFixed(1);
  const h = Number(evt.height).toFixed(1);
  const div = document.getElementById('result');
  counter++;
  div.innerHTML = `${counter}: stylus width: ${w}, height: ${h}`;
});
body {
  background-color: #eee;
  color: black;
}

#result {
  margin: 0.5rem;
  width: 18rem;
  min-height: 2rem;
  padding: 0.5rem;
  border: 1px solid gray;
  color: green;
}
<h4>Test of Pointer Stylus Tip Size</h4>
<p>Touch or click anywhere...</p>
<div id="result"></div>