angular仿微信图片放大功能

近期要写一个移动端两个手指图片放大的功能，由于我们项目是angular框架。一时间没有思路只能百度找一些angualr的文档，果然一下就出来了，而且非常实用。我用根据自己的需求改动了一下，最后完成的效果是图片自适应屏幕大小，图片超过一屏的时候图片是出现滚动的效果。没有超过一屏图片会居中显示。上下留有黑色背景。下面看代码

上面用了ng-zoom 和ng-pinch 的指令，我的方法是根据指令判断图片大小，超过一屏修改div的大小和图片高度一致。图片高度没有超过一屏div大小为屏幕大小。然后css居中显示就可以了。下面是css的代码

css规定了图片宽度大小，高度自适应。下面是指令的代码

define([ 'app' ], function(app) {
    /*图片大小指令*/
    app.directive('ngZoom',function(){
        return {
            restrict:'A',
            controller: ['$scope','RPCService','globalContants','$rootScope','$document','$element', 
                function($scope,RPCService,globalContants,$rootScope,$document,$element) {


                 this.changeHeight = function(elHeight){
                    console.info("进入父"+elHeight);
                    console.info($element);
                    // angular.element(document.querySelector('#haha'))
                    $element.css({
                     height: elHeight + 'px'
                    });
                    
                 }


            }],
        }
    });
    //图片指令
    app.directive('ngPinch', function(){
        // Runs during compile
        return {
            restrict:'A',
            require:'?^ngZoom',
            link: function($scope, element, attrs, controller) {
                
                console.info(controller)
                var elWidth, elHeight;


                // mode : 'pinch' or 'swipe'
                var mode = '';


                // distance between two touche points (mode : 'pinch')
                var distance = 0;
                var initialDistance = 0;


                // image scaling
                var scale = 1;
                var relativeScale = 1;
                var initialScale = 1;
                var maxScale = parseInt(attrs.maxScale, 10);
                if (isNaN(maxScale) || maxScale <= 1) {
                    maxScale = 3;
                }


                // position of the upper left corner of the element
                var positionX = 0;
                var positionY = 0;


                var initialPositionX = 0;
                var initialPositionY = 0;


                // central origin (mode : 'pinch')
                var originX = 0;
                var originY = 0;


                // start coordinate and amount of movement (mode : 'swipe')
                var startX = 0;
                var startY = 0;
                var moveX = 0;
                var moveY = 0;


                var image = new Image();
                image.onload = function() {
                    elWidth = element[0].clientWidth;
                    elHeight = element[0].clientHeight;
                    //判断父级div高度
                    var windowHeight = innerHeight;//获取屏幕高度
                    if(elHeight>=windowHeight){
                        controller.changeHeight(elHeight);
                    }else{
                        controller.changeHeight(windowHeight);
                    }


                    element.css({
                        '-webkit-transform-origin' : '0 0',
                        'transform-origin'         : '0 0'
                    });


                    element.on('touchstart', touchstartHandler);
                    element.on('touchmove', touchmoveHandler);
                    element.on('touchend', touchendHandler);
                };
              
                if (attrs.ngSrc) {
                    image.src = attrs.ngSrc;
                } else {
                    image.src = attrs.src;
                }
                 /**
                 * @param {object} evt
                 */
                function touchstartHandler(evt) {
                    console.info("进入第一个方法")
                    var touches = evt.originalEvent ? evt.originalEvent.touches : evt.touches;


                    startX = touches[0].clientX;
                    startY = touches[0].clientY;
                    initialPositionX = positionX;
                    initialPositionY = positionY;
                    moveX = 0;
                    moveY = 0;
                }


                /**
                 * @param {object} evt
                 */
                function touchmoveHandler(evt) {
                    console.info("进入第二个方法")
                    var touches = evt.originalEvent ? evt.originalEvent.touches : evt.touches;
                    if (mode === '') {
                        console.info(touches)
                        if (touches.length === 1 && scale > 1) {
                            
                            mode = 'swipe';
                        } else if (touches.length === 2) {
                            
                            mode = 'pinch';
                            initialScale = scale;
                            initialDistance = getDistance(touches);
                            console.info("赋值mode")
                            originX = touches[0].clientX -
                                parseInt((touches[0].clientX - touches[1].clientX) / 2, 10) -
                                element[0].offsetLeft - initialPositionX;
                            originY = touches[0].clientY -
                                parseInt((touches[0].clientY - touches[1].clientY) / 2, 10) -
                                element[0].offsetTop - initialPositionY;
                        }
                    }
                    if (mode === 'swipe') {
                        evt.preventDefault();
                        moveX = touches[0].clientX - startX;
                        moveY = touches[0].clientY - startY;
                        positionX = initialPositionX + moveX;
                        positionY = initialPositionY + moveY;
                        transformElement();
                    } else if (mode === 'pinch') {
                        console.info("进入pinch")
                        evt.preventDefault();
                        distance = getDistance(touches);
                        console.info("进入pinch2")
                        relativeScale = distance / initialDistance;
                        scale = relativeScale * initialScale;
                        positionX = originX * (1 - relativeScale) + initialPositionX + moveX;
                        positionY = originY * (1 - relativeScale) + initialPositionY + moveY;
                        transformElement();
                        console.info("进入pinch3")
                    }
                }
                /**
                 * @param {object} evt
                 */
                function touchendHandler(evt) {
                    var touches = evt.originalEvent ? evt.originalEvent.touches : evt.touches;


                    if (mode === '' || touches.length > 0) {
                        return;
                    }


                    if (scale < 1) {


                        scale = 1;
                        positionX = 0;
                        positionY = 0;


                    } else if (scale > maxScale) {


                        scale = maxScale;
                        relativeScale = scale / initialScale;
                        positionX = originX * (1 - relativeScale) + initialPositionX + moveX;
                        positionY = originY * (1 - relativeScale) + initialPositionY + moveY;


                    } else {


                        if (positionX > 0) {
                            positionX = 0;
                        } else if (positionX < elWidth * (1 - scale)) {
                            positionX = elWidth * (1 - scale);
                        }
                        if (positionY > 0) {
                            positionY = 0;
                        } else if (positionY < elHeight * (1 - scale)) {
                            positionY = elHeight * (1 - scale);
                        }


                    }


                    transformElement(0.1);
                    mode = '';
                }
                function transformElement(duration) {
                    
                    var transition  = duration ? 'all cubic-bezier(0,0,.5,1) ' + duration + 's' : '';
                    var matrixArray = [scale, 0, 0, scale, positionX, positionY];
                    var matrix      = 'matrix(' + matrixArray.join(',') + ')';


                    element.css({
                        '-webkit-transition' : transition,
                        transition           : transition,
                        '-webkit-transform'  : matrix + ' translate3d(0,0,0)',
                        transform            : matrix
                    });
                }
                 /**
                 * @param {Array} touches
                 * @return {number}
                 */
                function getDistance(touches) {
                    var d = Math.sqrt(Math.pow(touches[0].clientX - touches[1].clientX, 2) +
                        Math.pow(touches[0].clientY - touches[1].clientY, 2));
                    return parseInt(d, 10);
                }


            }
        };
    });

});

指令的代码这部分很常见，都可以百度到，不多做解释....