PointerEvents不检测Wacom片

Question

我试图使用指针事件来检测图形平板电脑的输入，包括笔压，但是Chrome和Firefox似乎没有正确地读取平板设备(Wacom 4)。所有指针事件都以与我的鼠标相同的pointerId和pointerType返回，默认压力读数为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还没有正确地支持图形平板电脑，还是我只是做错了什么？

不，你没做错什么。

最现代的浏览器支持指针事件。我发现(和其他浏览器一样)“支持”的程度可能会有所不同。

这就引出了这样的问题：“我们如何避免浏览器不兼容的胡说八道？”对于这种特殊情况，我建议使用Pressure.js。

要查看它的运行情况(并使用您选择的设备进行测试)，请查看Pressure.js实例。

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/PointerEvent/pointerType

Answer 3

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

div {
  touch-action: none;
}