해머 js로 끌기 및 확대/축소 js

Question

이미지를 드래그하는 데 문제가 있습니다. 포인터를 중심으로 핀치 확대/축소를 구현하고 필요한만큼 작업하기 위해 이러한 솔루션을 조합하여 사용했습니다 : solution 1, solution 2.

끌기를 구현하려고하면 문제가 발생합니다. 나는 최적의 솔루션을 찾을 수 없었습니다.

여기

var scale = 1; 
var xLast = 0; 
var yLast = 0; 
var xImage = 0; 
var yImage = 0; 
var lastScale, xNew, yNew;   
Hammer($('#myImage').get(0)).on("touch drag transform", function (event) { 
    switch(event.type) { 
     case 'touch': 
      lastScale = scale; 
      break; 
     case 'drag': 
      var posX = event.gesture.deltaX; 
      var posY = event.gesture.deltaY; 

      var xScreen = posX; //- $(this).offset().left; 
      var yScreen = posY; //- $(this).offset().top; 
      xImage = xImage + ((xScreen - xLast)/scale); 
      yImage = yImage + ((yScreen - yLast)/scale); 

      xNew = (xScreen - xImage)/scale; 
      yNew = (yScreen - yImage)/scale; 

      xLast = xScreen; 
      yLast = yScreen; 

      break; 
     case 'transform': 
      var posiX = event.gesture.center.pageX; 
      var posiY = event.gesture.center.pageY; 

      var xScreen = posiX; //- $(this).offset().left; 
      var yScreen = posiY; //- $(this).offset().top; 

      xImage = xImage + ((xScreen - xLast)/scale); 
      yImage = yImage + ((yScreen - yLast)/scale); 

      scale = Math.max(0, Math.min(lastScale * event.gesture.scale, 10)); 

      xNew = (xScreen - xImage)/scale; 
      yNew = (yScreen - yImage)/scale; 

      xLast = xScreen; 
      yLast = yScreen;      

      break;     
     }    
    $(this).css('-webkit-transform', 'scale(' + scale + ')' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')') 
        .css('-webkit-transform-origin', xImage + 'px ' + yImage + 'px') 
        .css('-moz-transform', 'scale(' + scale + ') translate(' + xNew + 'px, ' + yNew + 'px)') 
        .css('-moz-transform-origin', xImage + 'px ' + yImage + 'px') 
        .css('-o-transform', 'scale(' + scale + ') translate(' + xNew + 'px, ' + yNew + 'px)') 
        .css('-o-transform-origin', xImage + 'px ' + yImage + 'px') 
        .css('transform', 'scale(' + scale + ') translate(' + xNew + 'px, ' + yNew + 'px)');  
     }); 

, 내가 드래그를 구현하는 데 도움이 필요하세요 내 코드입니다. 모든 제안, 아이디어, 설명, 구현은 매우 잘 받아 들여집니다.

감사합니다.

PD. 내 하찮은 영어 실력에 죄송하다는 말씀을 드리고 싶습니다.

Answer 1

이것은 당신의 드래그 switch 문에서 나를 위해 작동 :

 posX = ev.gesture.deltaX + lastX; 
    posY = ev.gesture.deltaY + lastY; 
    break; 

그런 다음이 코드 변환을 위해 일해야합니다

"translate3d(" + posX + "px," + posY + "px, 0) ";