javascript - 浏览器中的Wacom取消移动

我目前正在尝试使用wacom语言工具在浏览器的画布上绘画某些内容。

该代码非常基本，除了找到我的鼠标的位置并在单击鼠标时绘制路径外，没有做任何其他事情。

当我使用鼠标时，这可以按预期工作。当我使用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在几个像素后停止绘制？

最佳答案

我碰到了这个确切的问题，在经过几个像素后出现了“ lostpointercapture” PointerEvent

https://jsfiddle.net/mr1z7qg3/

解决方案是添加

touch-action: none;

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

...在Chrome上

Firefox需要在about：config中使用dom.w3c_pointer_events.dispatch_by_pointer_messages

关于javascript - 浏览器中的Wacom取消移动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50783744/