Question

我正在开展我的第一个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用于项目的其他部分。我更愿意坚持这两个，这对我来说也是一个学习项目。但如果没有别的办法，我可以加入另一个图书馆。

Answer 1

抱歉，我不知道所需的确切代码，但如果有的话，那会稍微好些，因为最后的项目仍然是你自己的代码，并要求你自己做一些事情。< / p>

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

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记者来获取用户的手指位置。

HTML5画布触摸平移/滚动？

1 个答案: