Drag and zoom with 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

Это работает для меня в своем заявлении переключатель сопротивления:

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

Тогда этот код должен работать для преобразования:

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