先放結論:結論是可以成功獲得壓感,可行。具體方案可以見文章末尾。
想着做一款帶壓感的在線繪圖工具。首當其衝的問題就是web無法獲取到數位板的壓感數值。
查詢了知乎、百度、google,得到了一下集中方案:
1. pressurejs.com
這是一個js庫,介紹說可以在web上獲取壓感,兼容所有設備,包括wacom數位板、android、ios等設備
實測我的數位板——wacom intos5 ptk650,用這個庫是無法獲得壓感的。
2.windows API
資料太少,而且不是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。
當然這裏也可以直接下載,不保證是最新版本,以後可能會失效
這一套sdk中,有適用於web的sdk,實測在edge是可用的,在chrome貌似有一些兼容性問題。
下圖是在edge上的效果,提供了多種示例。具體代碼還沒看,等研究後再分享
0128更新
使用will並不能準確識別筆壓。實測圖中的粗細效果,是通過筆移動的速度來模擬的,這一點有點雞賊。隨後看了will的源碼,will使用的也是標準web api中的pointerEvent事件。聯繫到網上的資料多數都引導至pointerEvent事件的pressure值,那麼肯定是我的環境有問題。查閱了pointerEvent的文檔:
PointerEvent.pressure | Always returns a value of 0 on hardware that doesn't support pressure | Returns 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://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也可以,或者自己實現都行。