用Hammer拖動和縮放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) ";