Question

我正在尝试使用“指针事件”来检测图形输入板的输入，包括笔压，但Chrome和Firefox似乎无法正确读取图形输入板（Wacom Intuos 4）。返回的所有指针事件都与我的鼠标具有相同的指标编号和指标类型，默认压力读数为0.5。我正在使用的代码如下所示：

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

这将输出“ 1”，“鼠标”和“ 0.5”。对于“ pointerdown”，“ pointermove”和“ pointerup”事件会发生这种情况。

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

Chrome和Firefox是否还不正确支持图形输入板，还是我做错了什么？

Answer 1

回答您的问题：

Chrome和Firefox是否还不正确支持图形输入板，还是我做错了什么？

不，您没有做错任何事情。

最现代的browsers support Pointer Events。我发现（像其他所有基于浏览器的一样），“支持”的程度可能会有所不同。

这是一个问题，“我们如何避免浏览器不兼容的废话？”对于这种特殊情况，我建议使用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

如果启用/禁用Windows Ink和/或为元素添加以下CSS，则可能会得到更好的结果。

div {
  touch-action: none;
}

PointerEvents未检测到Wacom平板电脑

3 个答案: