带笔的 Chrome 画布 touchstart 无法正常工作答案

【问题标题】：Chrome canvas touchstart with pen is not working properly带笔的 Chrome 画布 touchstart 无法正常工作
【发布时间】：2018-07-01 09:21:19
【问题描述】：

我正在尝试创建一个画布对象，它可以像 mspaint 一样用来绘制东西。我希望能够使用鼠标以及笔（在我的情况下，表面笔位于表面 4 上）。

在所有 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;
      }
};

【问题讨论】：

标签： javascript google-chrome canvas touch-event pen

【解决方案1】：

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

这是它的工作方式：

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

【讨论】：