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

Question

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

问题：当我开始用我的数位板和笔绘图时，即使在使用钢笔。（使用鼠标时，这按预期工作，没有问题）

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

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

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

第三个显示鼠标输入，能够在 canvas 周围移动而不触发 pointercancel 事件。

如果您能提供任何帮助来解决此问题，我们将不胜感激，自从 chrome 55 以来似乎确实支持此功能，因此我不确定是什么原因导致指针取消被触发。

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

canvas区域的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

找到这个here

The pointercancel event is fired when the browser determines that there are unlikely to be any more pointer events, or if after the pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling.

似乎一旦您离开点击区域就会引发此事件，因为它改变了点击的性质...

我建议你简单地删除你的侦听器，pointerup 事件应该足以检测输入的结束


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

Answer 2

有同样问题的朋友:

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

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

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

Pointer Event issue: pointercancel with pressure input (pen)

javascript

html

google-chrome

html5-canvas

pointer-events