在web上实现压感

先放结论:结论是可以成功获得压感,可行。具体方案可以见文章末尾。

 

想着做一款带压感的在线绘图工具。首当其冲的问题就是web无法获取到数位板的压感数值。

查询了知乎、百度、google,得到了一下集中方案:

1. pressurejs.com

这是一个js库,介绍说可以在web上获取压感,兼容所有设备,包括wacom数位板、android、ios等设备

实测我的数位板——wacom intos5 ptk650,用这个库是无法获得压感的。

2.windows API

https://docs.microsoft.com/zh-cn/windows/win32/api/winuser/nf-winuser-getpointerpeninfo?redirectedfrom=MSDN

资料太少,而且不是web端的api,放弃

3.mozilla pointer API

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events

实测无法获取压感,输出的压感数值只有0.5,不会随压力改变

 

4.以上3给方案都给否了,最终查到wacom官方在2016年推出了will sdk。旨在提供数字文具的标准化方案。

https://developer.wacom.com/en-us/developer-dashboard/downloads#ink-edition

需要翻墙注册wacom的账号成为开发者,才能下载到sdk。

当然这里也可以直接下载,不保证是最新版本,以后可能会失效

https://cdn.wacom.com/s/developer/WILL_SDK_Web_2.1.0a.zip?e=1580113659&h=edce1aaaa68b3bb2612dbdd487ca9bda

这一套sdk中,有适用于web的sdk,实测在edge是可用的,在chrome貌似有一些兼容性问题。

下图是在edge上的效果,提供了多种示例。具体代码还没看,等研究后再分享

0128更新

使用will并不能准确识别笔压。实测图中的粗细效果,是通过笔移动的速度来模拟的,这一点有点鸡贼。随后看了will的源码,will使用的也是标准web api中的pointerEvent事件。联系到网上的资料多数都引导至pointerEvent事件的pressure值,那么肯定是我的环境有问题。查阅了pointerEvent的文档:

PointerEvent.pressureAlways returns a value of 0 on hardware that doesn't support pressureReturns a value of 0.5 for active contact (such as mouse button push) and 0 otherwise on hardware that doesn't support pressure

 

很明显,我的pressure一直是0.5,尝试输出了pointerEvent.pointType,得到的结果果然是mouse。

所以问题的根源出在我们的wacom数位板指针事件,被识别成了鼠标行为。那么为什么呢?现在怀疑是win10自带的笔势和触控笔的功能导致的问题。有待更多尝试。

本轮的参考资料:

https://stackoverflow.com/questions/51911711/pointerevents-not-detecting-wacom-tablet

https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/dn304886(v=vs.85)?redirectedfrom=MSDN

https://www.youtube.com/watch?v=AHGNU-_FPYw

0128二更

will的web sdk是不带pressure的。另外,的确是因为Windows ink功能导致的pointerEvent事件识别问题。表现为:在wacom设置中将‘使用windows ink功能’勾上后,pointerEvent的识别就正确识别为pen,pressure也正确了。但是这又引发了另外一个问题:开了windows ink,在web中会启用各种笔势,导致无法正常绘图。典型的就是笔从左往右划,会触发浏览器的‘back’行为。而且画布上会无法画画。

另,windows edge浏览器自带了一个‘添加备注’的插件,这个插件很好的实现了绘图、压感的功能。但是怎么实现的呢?还不清楚。web实现的方法告一段落,接下来研究通过.net来实现压感绘图。

 

0129更新

web压感方案有进展。当前确认的环境是

1.wacom数位板,wacom驱动,在驱动中勾选‘启用windowsInk’。如果不勾,web识别数位笔的pointer事件位mouse,即pressure永远是0.5,在web丧失了压感数据。

2.will框架提供的sample,tutorial1-part2,实现了压感功能

3.修改part2的html文件,在canvas的css中添加参数touch-action: none; 这样画布就不响应windowsink的拖动操作了,可以正常开画。

3.1 同理,使用pressurejs也可以,或者自己实现都行。

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值