PointerEvents not detecting Wacom Tablet

问题

I'm attempting to use Pointer Events to detect graphics tablet input including pen pressure, but Chrome and Firefox don't seem to be reading the tablet device (Wacom Intuos 4) properly. All pointer events come back with the same pointerId and pointerType as my mouse, with the default pressure reading of 0.5. The code I'm using looks something like this:

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

This outputs "1", "mouse", and "0.5". This occurs for the "pointerdown", "pointermove", and "pointerup" events.

I've tried this on both Windows and Linux with the appropriate drivers installed, and other applications detect pen pressure (Krita, for instance).

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

回答1:

To answer your question:

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

No, you're not doing anything wrong.

Most modern browsers support Pointer Events. I have found that (like everything else browser based) the degree of "support" can vary.

This begs the quesiton, "how do we avoid the browser incompatibility nonsense?" For this particular case, I'd recommend Pressure.js.

To see it in action (and test it with your device of choice), check out the Pressure.js examples.

回答2:

Try using a function like below to determine if the different pointer types are being detected:

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 has lots of documentation on pointer events for mouse, pens, and touch.

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

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

回答3:

You might get better results if you enable/disable Windows Ink and/or add the following CSS for your element.

div {
  touch-action: none;
}

来源：https://stackoverflow.com/questions/51911711/pointerevents-not-detecting-wacom-tablet

标签

javascript

pointer-events

wacom