移动端如何实现图片通过捏合手势放大缩小呢？

Question

想要实现移动端网页图片根据捏合手势放大缩小图片，该如何去实现呢？

Answer 1

/*

            * @Author 兔爷

            * @function 实现单指拖动图片，双指缩放图片

            * @marks 参数one是为了区分屏幕上现在是一根手指还是两根手指，因为在滑动的时候两根手指先离开一根会触发一根手指移动图片位置这个方法

            */

            var touchScale = function(seletor, bg) {

                var startX, endX, scale, x1, x2, y1, y2, imgLeft, imgTop, imgWidth, imgHeight,

                    one = false, 

                    $touch = $(seletor),

                    originalWidth = $touch.width(),

                    originalHeight = $touch.height(),

                    baseScale = parseFloat(originalWidth/originalHeight),

                    imgData = [],

                    bgTop = parseInt($(bg).css('top'));

                function siteData(name) {

                    imgLeft = parseInt(name.css('left'));

                    imgTop = parseInt(name.css('top'));

                    imgWidth = name.width();

                    imgHeight = name.height();

                }

                $(document).on('touchstart touchmove touchend', $(seletor).parent().selector, function(event){

                    var $me = $(seletor),

                        touch1 = event.originalEvent.targetTouches[0],  // 第一根手指touch事件

                        touch2 = event.originalEvent.targetTouches[1],  // 第二根手指touch事件

                        fingers = event.originalEvent.touches.length;   // 屏幕上手指数量

                    //手指放到屏幕上的时候，还没有进行其他操作

                    if (event.type == 'touchstart') {

                        if (fingers == 2) {

                            // 缩放图片的时候X坐标起始值

                            startX = Math.abs(touch1.pageX - touch2.pageX);

                            one = false;

                        }

                        else if (fingers == 1) {

                            x1 = touch1.pageX;

                            y1 = touch1.pageY;

                            one = true;

                        }

                        siteData($me);

                    }

                    //手指在屏幕上滑动

                    else if (event.type == 'touchmove') {

                        if (fingers == 2) {

                            // 缩放图片的时候X坐标滑动变化值

                            endX = Math.abs(touch1.pageX - touch2.pageX);

                            scale = endX - startX;

                            $me.css({

                                'width' : originalWidth + scale,

                                'height' : (originalWidth + scale)/baseScale,

                                'left' : imgLeft,

                                'top' : imgTop

                            });

                            

                        }else if (fingers == 1) {

                            x2 = touch1.pageX;

                            y2 = touch1.pageY;

                            if (one) {

                                $me.css({

                                    'left' : imgLeft + (x2 - x1),

                                    'top' : imgTop + (y2 - y1)

                                });

                            }

                        }

                    }

                    //手指移开屏幕

                    else if (event.type == 'touchend') {

                        // 手指移开后保存图片的宽

                        originalWidth = $touch.width(),

                        siteData($me);

                        imgData = [[imgLeft, imgTop-bgTop, imgWidth, imgHeight],[0, 0, 640, 640]];

                    }

                });

                var getData = function(){

                    return imgData;

                };

                return {

                    imgData : getData

                }

            };

            这是我之前写的单指拖动，双指缩放的js代码，希望对你有所帮助，用前请调用jquery。