Question

我使用html5 canvas创建了基于绘画的功能。当谈到桌面时，它按照我的预期工作，但问题只出在触控设备上。我不知道问题来自哪里。有人可以帮我解决这个问题吗？我过去两天都在挣扎。

我的代码

if(windowWidth <= 1024) {
  canvas2.addEventListener('touchmove', function(e) {
      mouse.x = e.pageX;
      mouse.y = e.pageY;
      handlerPos.x = e.pageX;
      handlerPos.y = e.pageY;
  }, false);
} else {
  canvas2.addEventListener('mousemove', function(e) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;
    handlerPos.x = e.pageX;
    handlerPos.y = e.pageY;
  }, false);
}

Answer 1

也许你正在寻找这个

不幸的是，一切都不顺利。与内置浏览器手势冲突引发的问题。当我在画布上移动手指时，我希望页面保持静止，以便我可以画画。但是，如果我的页面有水平或垂直滚动（并且确实如此），页面将随我的手指移动并且无法进行正确的绘制。经过一番挫折后，我偶然发现了解决方案：如果触摸事件的目标是画布，则阻止在document.body上滚动。

http://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html

document.body.addEventListener('touchmove', function(e) {
   mouse.x = e.pageX;
   mouse.y = e.pageY;
   handlerPos.x = e.pageX;
   handlerPos.y = e.pageY;
}, false);

如何使用html5 canvas处理触摸事件？

1 个答案: