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

Question

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

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

Answer 1

通过捕获 PointerEvent 并检查其代表笔尖尺寸的宽度和高度属性，您可以相当高的置信度判断触摸是否是由手指或手写笔进行的。手写笔通常比手指具有更小的宽度和高度。训练应用程序来识别手指与手写笔由于屏幕、手指和触控笔之间的笔尖尺寸可能有所不同，因此一种可能的策略是让用户训练应用程序以识别不同类型的触摸：“这是一根手指”命令，然后进行几次手指触摸，直到应用程序获得良好的尺寸样本。“这是一支手写笔”命令，然后是几次手写笔触摸。这将显示屏幕上触摸或单击的笔尖尺寸：let counter = 0;// listen for 'pointerdown' events, detect tip sizewindow.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>