使用 Javascript 在 Ipad 上平移缩放图像答案

【问题标题】：Pan Zoomed Image on Ipad using Javascript使用 Javascript 在 Ipad 上平移缩放图像
【发布时间】：2013-06-13 07:30:36
【问题描述】：

我正在编写一个 jquery 插件，允许用户捏合和放大图像。然后，用户可以使用一键平移图像。

我已经完成了所有工作，但是图像周围的平移非常快，我需要放慢速度。我希望有人可以提出一些建议。不幸的是，我不允许使用某些库，例如hammer JS。

这里是平移图像的代码。

var pos = $this.position();

var top = (pos.top + (orig.changedTouches[0].pageY - offsetPos.y)),
    left = (pos.left +(orig.changedTouches[0].pageX - offsetPos.x));

    //Apply Limits to keep image in viewport
    var viewWidth =  ($this.parent().width());
    var X_LIMIT = viewWidth - $this.width();
    var viewHeight =  ($this.parent().height());
    var Y_LIMIT = viewHeight - $this.height();

    if (left > viewWidth) { left = viewWidth; }
    if (left < X_LIMIT) { left = X_LIMIT; }
    if (top > viewHeight) { top = viewHeight; }
    if (top < Y_LIMIT) { top = Y_LIMIT; }

    if(top >0){top = 0;}
    if(left >0){left = 0;}

    $this.css({
        top: top,
        left: left
    });

任何帮助将不胜感激。

【问题讨论】：

标签： jquery ipad pinchzoom pan

【解决方案1】：

我设法解决了这个问题。将来是否有人需要这样的东西。代码附在下面。

var orig = e.originalEvent;
if(e.type == 'touchstart'){
    if(orig.touches.length == 1){
        touches = 1;
        origX = orig.targetTouches[0].pageX;
        origY = orig.targetTouches[0].pageY;
    }else if(orig.touches.length == 2){
        touches = 2;
    }
}else if(e.type == 'touchmove'){
    e.preventDefault();

    if(touches == 1){
    /*=================================================*\
    Detect Single Touch and pan around image accordingly
    \*=================================================*/
    width = $zoomImg.width();
    height = $zoomImg.height();

    if(width> originalWidth || height> originalHeight){
        e.stopPropagation();

        var delX = (orig.targetTouches[0].pageX - origX)/settings.sensitivity,
            delY = (orig.changedTouches[0].pageY - origY)/settings.sensitivity,
            pos = $zoomImg.position(),
            left = pos.left + delX,
            top = pos.top + delY,
            viewWidth =  ($this.parent().width()),
            X_LIMIT = viewWidth - width,
            viewHeight =  ($this.parent().height()),
            Y_LIMIT = viewHeight - height;


            //Apply Limits to keep image in viewport
            if (left > viewWidth) { left = viewWidth; }
            if (left < X_LIMIT) { left = X_LIMIT; }
            if (top > viewHeight) { top = viewHeight; }
            if (top < Y_LIMIT) { top = Y_LIMIT; }

            if(top >0){top = 0;}
            if(left >0){left = 0;}

            $zoomImg.css({
                top: top,
                left: left
            });
        }
    }
}

【讨论】：