멀티 터치 핀치, 팬, 확대/축소 HTML 5 캔버스

Question

HTML5 캔버스 요소에서 멀티 터치 핀치, 이동 및 확대/축소를 처리하기 위해 작성된 대부분의 모듈이 있습니다. 나는 그것을 아래에서 공유 할 것이다. 나는 JavaScript로 얼마 동안 개발 해왔고, 지금도 계속해서 저를 괴롭 히고 있습니다. 누구나 통찰력이 있다면, 내 iPad에서 작업이 확인되면 모든 사람들이 공유 할 수 있도록 스택에 최종 버전을 게시 할 것입니다.

touchmove 이벤트는 변수의 변화를 트리거 : 여기

내가 뭐하는 거지입니다. 이러한 변수를 사용하여 이미지가 캔버스에 그려지는 방식을 변경합니다. 8 개의 변수가 있는데, 각각은 drawImage() 함수에 넣을 수있는 옵션에 해당합니다. 이 8 가지 변수는 값을 증가/감소시키고 특정 범위 내에서 유지하는 기능을 통해 업데이트됩니다. 변수는 클로저 변수이므로 모듈 전체에서 전역 변수입니다. 과도한 프로세싱을 방지하기 위해 사용자가 setInterval()을 사용하여 손가락을 누른 상태에서이 drawImage() 함수를 40ms마다 한 번 호출합니다. 여기에 문제가 있습니다 :

touchmove 이벤트는 내 변수가 동일한 이벤트의 여러 인스턴스에서 업데이트되는 경쟁 조건을 유발하는 것 같습니다. 콘솔 출력을 통해이를 확인할 수 있습니다. 한 변수는 결코 20 미만에 도달하지 못하도록 추적합니다. 한 방향으로 빠르게 스 와이프하면 해당 변수가 20 이하로 떨어집니다. 그런 다음 손가락을 떼면 천천히 스 와이프됩니다. 이 방향으로 나를 가리키는 또 다른 것은, 내 프로그램을 통해 스테핑하면서이 변수들을 볼 때, 그들은 내 console.log()이 펌프질하는 것과 다릅니다.

참고 : 코드는 첫 번째 이미지를 성공적으로 그렸지만 이후에는 언제나 그 이미지를 성공적으로 그립니다. 내 코드의 기본 번역은 아래에 있습니다 ... 정식 버전은 Scripts 폴더 안에 GitHub에 있습니다. 내가 강력하게 당신이 필요로하는 터치 이벤트를 많이 지원하는, 센차 터치 2.0.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

에서 센차 터치 1.1 응용 프로그램입니다. 예제는 http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo/touchevents을 참조하십시오.