HTML5 画布触摸平移/滚动

HTML5 canvas touch panning/scrolling?

本文关键字：滚动 触摸 布触摸 HTML5      更新时间：2023-09-26

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

初始视图

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

第一次缩放后

  6     7  10    11

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

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

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

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

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

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

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报告器来获取用户的手指位置。

相关文章：