指针事件问题：带有压力输入（笔）的指针取消

Question

提前谢谢你的帮助。我有点被我遇到的问题难住了。我正在使用 react 和 canvas 在 chrome 中开发一个 web 应用程序。此问题似乎是压力笔输入的PointerEvent问题。

问题：当我开始使用数位板和笔绘图时，即使笔仍然施加压力，也会在绘制一段短距离后触发指针取消事件。（使用鼠标时，这按预期工作，没有问题）

为了更好地描述问题，这是正在发生的事情的可视化。（.gif 以白屏开始）

第一行是笔输入的直线，我试图在屏幕上绘制，但正如您所看到的，即使笔压力仍在施加，它也被突然中断（这是触发 pointercancel 事件的地方） . 这也显示了在触发事件之前可能的区域大小。

第二个显示，只要我用笔输入停留在一个小区域，pointercancel 就不会触发，但是一旦我尝试离开该区域，pointercancel 事件就会被触发并停止绘制线条。

第三个显示来自鼠标的输入，能够在画布上移动而不会触发 pointercancel 事件。

解决此问题的任何帮助将不胜感激，它看起来确实从 chrome 55 开始支持此功能，所以我不确定是什么导致了指针取消被触发。

虽然我不认为它与问题真的相关，但如果它在这里是项目的代码，重新编写一个触摸只是为了使其更清晰。它不是很复杂，只是一个简单的画布来测试输入。

画布区域的 HTML 如下（它在 react 组件中）：

<div className="session-container">
  <canvas ref="canvas" className="canvas"></canvas>
</div>

和 javascript，它都在 react 的一个组件中，如下所示：

componentDidMount() {
  this.canvas = this.refs.canvas;
  this.context = this.canvas.getContext("2d");

  this.canvas.addEventListener('pointerdown', this.onDown, false);
  this.canvas.addEventListener('pointerup', this.onUp, false);
  this.canvas.addEventListener('pointercancel', this.onUp, false);
  this.canvas.addEventListener('pointermove', this.onMove, false);
}

onDown(e) {
  this.drawing = true;

  current.x = e.clientX || e.touches[0].clientX;
  current.y = e.clientY || e.touches[0].clientY;
}

onUp(e) {
  this.drawing = false;
}

onMove(e) {
  if (!this.drawing) return;

  this.drawLine(current.x, current.y, e.clientX || e.touches[0].clientX, e.clientY || e.touches[0].clientY, e.pressure, true);
  current.x = e.clientX || e.touches[0].clientX;
  current.y = e.clientY || e.touches[0].clientY;
}


drawLine(x0, y0, x1, y1, pressure, emit){
  this.context.beginPath();
  this.context.moveTo(x0, y0);
  this.context.lineTo(x1, y1);
  this.context.strokeStyle = 'black';
  this.context.lineWidth = 2;
  this.context.stroke();
  this.context.closePath();
}

组件的完整视图可以在这里找到 Gist

Answer 1

对于那些有同样问题的人：

解决方案是添加一个 css 属性 touch-action: none;

它改变了指针事件的行为，这似乎是默认的：使用任何指针作为点击设备，而不是绘图设备