为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

沧海一幻觉 2023-12-25 16:34:45
我正在尝试制作一个绘图网络应用程序。我想用手写笔绘画并用手移动画布。如何区分这两者?我在 MDN 官方文档中没有发现任何有希望的内容。
查看完整描述

1 回答

?
慕标5832272

TA贡献1966条经验 获得超4个赞

通过捕获 PointerEvent 并检查其代表笔尖尺寸的宽度和高度属性,您可以相当高的置信度判断触摸是否是由手指或手写笔进行的。

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


训练应用程序来识别手指与手写笔

由于屏幕、手指和触控笔之间的笔尖尺寸可能有所不同,因此一种可能的策略是让用户训练应用程序以识别不同类型的触摸:

“这是一根手指”命令,然后进行几次手指触摸,直到应用程序获得良好的尺寸样本。

“这是一支手写笔”命令,然后是几次手写笔触摸。

这将显示屏幕上触摸或单击的笔尖尺寸:

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>


查看完整回答
反对 回复 2023-12-25
  • 1 回答
  • 0 关注
  • 192 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信