浏览器中的 Wacom 取消移动

Question

我目前正在尝试使用我的 wacom intous 在我的浏览器中的 canvas 上绘制一些东西。

代码非常基础，除了找到我的鼠标位置并在单击鼠标时绘制一条路径外，什么都不做。

当我使用鼠标时，这按预期工作。当我使用我的 wacom 数位板时，移动将在 ~20px 后取消，并且将触发 lostpointercapture 事件以及 pointercancel 事件。

这是代码：

(function() {


var canvas = document.querySelector('.canvas');
  var ctx = canvas.getContext('2d');

  var currentPosition = { 
    x: 0, 
    y: 0 
  };

  function init() {
    adjustCanvasSize();
  }

  function adjustCanvasSize() {
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
  }

  function setPosition(ev) {
    currentPosition.x = ev.clientX;
    currentPosition.y = ev.clientY;
  }

  function draw(ev) {
    ev.preventDefault();
    if (ev.buttons !== 1) {
      return;
    }
    ctx.beginPath(); 
    ctx.lineWidth = 1; 
    ctx.lineCap = 'round'; 
    ctx.strokeStyle = '#1a1b1c'; 
    ctx.moveTo(currentPosition.x, currentPosition.y); 
    setPosition(ev);
    ctx.lineTo(currentPosition.x, currentPosition.y);
    ctx.stroke(); 
  }

  document.addEventListener('pointermove', draw);
  document.addEventListener('pointerdown', setPosition);
  document.addEventListener('pointerenter', setPosition);

  init();
})();

有谁知道为什么 wacom 在几个像素后停止绘图？

Answer 1

我已经运行解决了这个确切的问题，"lostpointercapture" PointerEvent 在遍历了几个像素后

https://jsfiddle.net/mr1z7qg3/

解决方法是添加

touch-action: none;

样式到绘制的位置，否则浏览器会将其解释为 pan/zoom 触摸手势 https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

...在 Chrome

Firefox 在 about:config 中需要 dom.w3c_pointer_events.dispatch_by_pointer_messages 而不是

浏览器中的 Wacom 取消移动

Wacom in a browser cancels movement

javascript

wacom

canvas