jquery - 使用 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) ";