0

我正在尝试创建一个画布对象，可以像 mspaint 一样使用它来绘制东西。我希望能够使用鼠标以及笔（在我的情况下，表面笔在 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;
      }
};
4

1 回答 1

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 };
}
于 2018-02-23T14:16:32.343 回答