多點觸控捏，平移，放大HTML 5畫布

Question

我大部分的模塊都是爲處理多點觸控捏，平移和縮放HTML 5畫布元素而編寫的。我會在下面分享它。我已經使用JavaScript開發了一段時間了，而且這種情況繼續讓我感到厭倦。如果有人有任何見解，我會在最終版本上發佈，讓大家分享一旦它確認在我的iPad上工作。

下面是我在做什麼：

touchmove事件觸發變量的變化。我使用這些變量來改變將圖像繪製到畫布上的方式。我有八個變量，每個變量都對應於可以放入drawImage()函數的選項。這八個變量通過增加/減少它們的值並將它們保持在一定範圍內的函數進行更新。變量是閉包變量，所以它們在我的模塊中是全局的。爲了防止過度處理，我們每40ms調用一次drawImage()函數一次，而用戶用手指按下setInterval()來按下屏幕。 這裏是問題：

touchmove事件似乎導致競爭條件，其中我的變量被同一事件的許多不同實例更新。我可以通過我的控制檯輸出來確認這一點，它跟蹤一個變量的範圍從未達到20以下。當我快速向一個方向滑動時，該變量下降到遠低於20的位置。然後，當我鬆開手指時，慢慢地滑動，返回到20.另一件事指向了這個方向，當我在瀏覽我的程序時查看這些變量時，他們與我的console.log()泵出的不同。

注意：該代碼第一次成功繪製圖像，但不是此後的任何時間。我的代碼的基本演繹如下...完整版本位於Scripts文件夾內的GitHub。這是一個Sencha觸摸v1.1應用程序在心臟

function PinchPanZoomFile(config) 
{ 
    /* 
    * Closure variable declaration here... 
    * Canvas Declaration here... 
    */ 

    function handleTouchStart(e) { 
     whatDown.oneDown = (e.originalEvent.targetTouches.length == 1) ? true : false; 
     whatDown.twoDown = (e.originalEvent.targetTouches.length >= 2) ? true : false; 

     drawInterval = setInterval(draw, 100); 
    } 

    function handleTouchEnd(e) { 
     whatDown.oneDown = (e.originalEvent.targetTouches.length == 1) ? true : false; 
     whatDown.twoDown = (e.originalEvent.targetTouches.length >= 2) ? true : false; 
     clearInterval(drawInterval); 
    } 

    function handleTouchMove(e) { 
     if(whatDown.twoDown) { 
      /* 
      * Do Panning & Zooming 
      */ 
      changeWindowXBy(deltaDistance); //deltaDistance 
      changeWindowYBy(deltaDistance); //deltaDistance 
      changeCanvasXBy(deltaX); //Pan 
      changeCanvasYBy(deltaY); //Pan 
      changeWindowDimsBy(deltaDistance*-1,deltaDistance*-1); //(deltaDistance)*-1 -- get smaller when zooming in. 
      changeCanvasWindowDimsBy(deltaDistance,deltaDistance); //deltaDistance -- get bigger when zooming in 

     } else if(whatDown.oneDown) { 
      /* 
      * Do Panning 
      */ 
      changeWindowXBy(0); 
      changeWindowYBy(0); 
      changeCanvasXBy(deltaX); 
      changeCanvasYBy(deltaY); 
      changeWindowDimsBy(0,0); 
      changeCanvasWindowDimsBy(0,0); 
     } 
    } 

    function draw() { 
     //Draw Image Off Screen 
     var offScreenCtx = offScreenCanvas[0].getContext('2d'); 
     offScreenCtx.save(); 
     offScreenCtx.clearRect(0, 0, canvasWidth, canvasHeight); 
     offScreenCtx.restore(); 
     offScreenCtx.drawImage(base64Image, 
      parseInt(windowX), 
      parseInt(windowY), 
      parseInt(windowWidth), 
      parseInt(windowHeight), 
      parseInt(canvasX), 
      parseInt(canvasY), 
      parseInt(canvasWindowWidth), 
      parseInt(canvasWindowHeight) 
     ); 

     //Draw Image On Screen 
     var offScreenImageData = offScreenCtx.getImageData(0, 0, canvasWidth, canvasHeight); 
     var onScreenCtx = canvas[0].getContext('2d'); 
     onScreenCtx.putImageData(offScreenImageData, 0, 0); 
    } 
} 

Answer 1

我強烈建議使用Sencha觸摸2.0.1，因爲它支持很多你需要的觸摸事件。例子見http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo/touchevents。