Chrome canvas 使用笔的 touchstart 无法正常工作

Question

我正在尝试创建一个 canvas 对象，它可以像 mspaint 一样用来绘制东西。我希望能够使用鼠标以及笔（在我的情况下，surface pen on a surface4）。

4个浏览器都可以用鼠标画图。问题出在笔上：它可以在 IE11、Egde、Firefox 上正常工作，但有一种浏览器无法正常工作，它是 Chrome...

事实上，使用Chrome(v63)，笔可以画画，但前提是笔没有接触屏幕，而是离屏幕很近。一旦我用笔触摸屏幕，它就不再画了...

所以我错过了什么吗？为什么我有这种差异，谁有正确的实施？我怎样才能将其修复为跨浏览器？请注意，我也尝试使用 PointerEvent (https://developer.mozilla.org/en-US/docs/Web/Events/pointerdown) 但它也没有用....

代码

查看并尝试此处的代码：https://codepen.io/miam84/pen/aNMryw

这里是一小部分使用监听器的代码:

canvas.addEventListener('touchstart', on_mousedown, false);
canvas.addEventListener('mousedown', on_mousedown, false);

function remove_event_listeners() {
      canvas.removeEventListener('mousemove', on_mousemove, false);
      canvas.removeEventListener('mouseup', on_mouseup, false);
      canvas.removeEventListener('touchmove', on_mousemove, false);
      canvas.removeEventListener('touchend', on_mouseup, false);
      document.body.removeEventListener('mouseup', on_mouseup, false);
      document.body.removeEventListener('touchend', on_mouseup, false);
};

//Event when the mouse is clicked
function on_mousedown(e) {
      if (!canvas.isLocked) {
        e.preventDefault();
        e.stopPropagation();

        canvas.hasDrawn = false;
        //we activate the mouse and touch events
        canvas.addEventListener('mouseup', on_mouseup, false);
        canvas.addEventListener('mousemove', on_mousemove, false);
        canvas.addEventListener('touchend', on_mouseup, false);
        canvas.addEventListener('touchmove', on_mousemove, false);
        document.body.addEventListener('mouseup', on_mouseup, false);
        document.body.addEventListener('touchend', on_mouseup, false);

        var xy = canvas.getCursorCoords(e);
        canvas.ctx.beginPath();
        canvas.pixels.push('moveStart');
        canvas.ctx.moveTo(xy.x, xy.y);
        canvas.pixels.push(xy.x, xy.y);
        canvas.xyLast = xy;
      }
};

Answer 1

问题已使用 PointerEvent API 解决，并且与我们使用偏移量获取指针位置的方式有关（如果 canvas 有边距，...）。

这是它的工作方式：

  canvas.removeEventListener('pointerup', on_mouseup, false);
  canvas.removeEventListener('pointermove', on_mousemove, false);
  document.body.removeEventListener('pointerup', on_mouseup, false);

function getMouseOffset (_e, _el) {  
  let xpos, ypos;
  if (typeof _e.offsetX === 'undefined') { // ff hack
    // dans ce cas, jQuery facilite l'appel d'offset
    xpos = _e.pageX - $(_el).offset().left; 
    ypos = _e.pageY - $(_el).offset().top;
  } else {
    xpos = _e.offsetX;
    ypos = _e.offsetY;
  }
  return { x: xpos, y: ypos };
}

Chrome canvas 使用笔的 touchstart 无法正常工作

Chrome canvas touchstart with pen is not working properly

javascript

google-chrome

canvas

touch-event

pen