javascript - 指针事件问题 : pointercancel with pressure input (pen)

Question

提前感谢您的帮助。我对我遇到的问题有点困惑。我正在使用 react 和 canvas 在 chrome 中开发一个网络应用程序。这个问题似乎是压力笔输入的 PointerEvent 问题。

问题:当我开始用我的数位板和笔绘图时，pointercancel 事件会在绘制一小段距离后触发，即使笔仍然施加压力也是如此。 (使用鼠标时，这按预期工作，没有问题)

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

第一条线是笔输入的直线，我试图在屏幕上绘制，但如您所见，它突然中断(这是触发 pointercancel 事件的地方)，即使笔压力是仍在应用中。这也显示了在触发事件之前可能的区域大小。

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

第三个显示来自鼠标的输入，能够在不触发 pointercancel 事件的情况下在 Canvas 上移动。

如果您能提供任何帮助来解决这个问题，我们将不胜感激，看起来自 chrome 55 以来就支持此功能，所以我不确定是什么导致触发了 pointercancel。

虽然我不认为它与问题真正相关，但如果它是项目的代码，请重新编写一些内容以使其更易读。它不是很复杂，只是一个用于测试输入的简单 Canvas 。

Canvas 区域的 HTML 如下(在 React 组件中):

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

在react中，javascript全部在一个组件中，如下所示:

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();
}

可以在此处找到该组件的完整 View Gist

Answer 1

有同样问题的 friend :

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

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