4

我正在尝试使用指针事件来检测图形输入板输入，包括笔压，但 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”、“鼠标”和“0.5”。这发生在“pointerdown”、“pointermove”和“pointerup”事件中。

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

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

4

3 回答 3

6

要回答您的问题：

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

不，你没有做错任何事。

大多数现代浏览器都支持指针事件。我发现（就像其他所有基于浏览器的东西一样）“支持”的程度可能会有所不同。

这就引出了一个问题，“我们如何避免浏览器不兼容的废话？” 对于这种特殊情况，我推荐Pressure.js。

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

于 2018-08-22T04:09:57.823 回答
1

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

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

于 2018-08-22T19:29:09.210 回答
0

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

div {
  touch-action: none;
}
于 2019-02-12T16:53:18.883 回答