使用Hammer js拖动和缩放

Question

我有一个拖拽图片的问题。我使用了这些解决方案的组合来实现一个以指针为中心的捏合缩放，它能够按照我需要的方式工作：解决方案1，解决方案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)');      
        });

请帮我实现拖拽功能，有任何建议、想法、解释或实现方法都非常欢迎。

谢谢。

附注：抱歉我的英语不太好。

- cucho

Answer 1

在你的拖动 switch 语句中，这对我有效：

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

那么这段代码应该适用于变换：

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

- Christopher Gwilliams