HTML5 画布触摸平移/滚动？答案

【问题标题】：HTML5 canvas touch panning/scrolling?HTML5 画布触摸平移/滚动？
【发布时间】：2015-01-15 21:23:33
【问题描述】：

我正在开发我的第一个 HTML5 画布项目。它呈现了一个网格，为简单起见，大小为 4x4。它必须是可缩放的，暂时不需要捏缩放，使用放大/缩小按钮就足够了。我让它工作，以便第一次放大将可见尺寸加倍到 2x2，下一次放大显示 1 个正方形的区域，对用户来说，缩放时网格的中心似乎没有移动，进一步缩放是不可能的。所以我控制了 scale() 和 translate()。

初始视图

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

第一次缩放后

6 7 10 11

我创建了按钮来使用 translate() 移动可见区域固定数量的像素，所以基本上我只需要听正确的触摸事件并做更多的事情，对吧？但无论我尝试什么，我都无法弄清楚如何使用触摸屏来做到这一点（我正在 Android 上开发）。我见过很多例子，包括众所周知的http://phrogz.net/tmp/canvas_zoom_to_cursor.html

如果有人能指出我正确的方向，我将不胜感激？

此外，目前我的“步进滚动”可以越过画布边框，这将是监视以了解边框是否接近的正确属性？

我使用的是纯 Javascript，jQuery 用于项目的其他部分。我宁愿坚持这两个，这对我来说也是一个学习项目。但如果没有其他方法，我可以包含另一个库。

【问题讨论】：

我建议使用“传单”link

标签： javascript android html canvas html5-canvas

【解决方案1】：

抱歉，我不知道所需的确切代码，但如果有的话，那会稍微好一些，因为最终的项目仍然是您自己的代码，并且需要您自己实际做一些事情。

无论如何，基本的想法是这样的：

var touching;
setInterval(function(){
  if (not user-touching-screen){
    touching=0;
  } else {
    if (touching == 0){
      touching = 1;
      ix = where-user-put-finger-down-x-coord; // find x-coord of finger position
      iy = where-user-put-finger-down-x-coord; // find y-coord of finger position
    } else {
      mx = where-finger-is-now-x;              // find x-coord of finger position
      my = where-finger-is-now-y;              // find y-coord of finger position
      translate(mx-ix,my-iy); /*translate entire canvas right mx-ix units,
                               *                        left  my-iy units
                               */
    }
  }
}, 5);

我猜你可以只使用鼠标 x/y 记者来获取用户的手指位置。

【讨论】：