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

问题描述

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

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

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

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

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

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

任何帮助都可以解决这个问题，它看起来确实支持自 chrome 55 以来对这个功能的支持，所以我不确定是什么导致了指针取消被触发。

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

画布区域的 HTML 如下（位于 react 组件内）：

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

并且所有在反应组件中的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();
}

可以在此处找到组件的完整视图 Gist

标签： javascripthtmlgoogle-chromehtml5-canvaspointer-events

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

问题描述

解决方案

推荐阅读