在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.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://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也可以,或者自己實現都行。

發佈了9 篇原創文章 · 獲贊 6 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章