PointerEvents 未检测到 Wacom 数位板

Question

我正在尝试使用指针事件检测绘图板输入，包括笔压，但 Chrome 和 Firefox 似乎无法正确读取绘图板设备 (Wacom Intuos 4)。所有指针事件都返回与我的鼠标相同的 pointerId 和 pointerType，默认压力读数为 0.5。我使用的代码看起来像这样：

container.addEventListener("pointerdown", (event) => {
    console.log(event.pointerId);
    console.log(event.pointerType);
    console.log(event.pressure);
}, true);

这会输出“1”、"mouse" 和“0.5”。这发生在 "pointerdown"、"pointermove" 和 "pointerup" 事件中。

我已经在 Windows 和 Linux 上都试过了，并安装了适当的驱动程序，其他应用程序可以检测笔压（例如 Krita）。

难道 Chrome 和 Firefox 还没有正确支持图形输入板，还是我只是做错了什么？

Answer 1

回答你的问题：

Do Chrome and Firefox not support graphics tablets properly yet, or am I simply doing something wrong?

不，你没有做错任何事。

最现代browsers support Pointer Events。我发现（就像其他所有基于浏览器的东西一样）"support" 的程度可能会有所不同。

这回避了问题，"how do we avoid the browser incompatibility nonsense?" 对于这种特殊情况，我建议 Pressure.js。

要查看实际效果（并使用您选择的设备进行测试），请查看 the Pressure.js examples。

Answer 2

尝试使用如下函数来确定是否检测到不同的指针类型：

targetElement.addEventListener("pointerdown", function(ev) {
   // Call the appropriate pointer type handler
   switch (ev.pointerType) {
     case "mouse": 
       process_pointer_mouse(ev); 
       break;
     case "pen": 
       process_pointer_pen(ev); 
       break;
     case "touch": 
       process_pointer_touch(ev); 
       break;
     default:
       console.log("pointerType " + ev.pointerType + " is Not suported");
   }
 }, false);

Mozilla 有很多关于鼠标、笔和触摸的指针事件的文档。

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

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

Answer 3

如果您 enable/disable Windows Ink and/or 为您的元素添加以下 CSS，您可能会得到更好的结果。

div {
  touch-action: none;
}

PointerEvents 未检测到 Wacom 数位板

PointerEvents not detecting Wacom Tablet

javascript

pointer-events

wacom