HTML5畫布觸摸平移/滾動？

Question

我正在做我的第一個HTML5 canvas項目。 它提供了一個網格，為簡單起見，它的大小為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

抱歉，我不知道所需的確切代碼，但是如果有的話，那會稍微好一點，因為最終的項目仍然是您自己的代碼，並且需要您自己實際做一些事情。

無論如何，基本思路是這樣的：

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報告程序來獲取用戶的手指位置。