1. 首页
  2. IT资讯

Angular图片缩放指令(手机端,手动放大缩小)

Angular手机端图片放大缩小

首先在controller中写一个指令,Angular中使用.directive声明一个指令
var demoForDirective = angular.module('demoForDirective', ['demoForDirective.controller']);  //图片缩放指令      demoForDirective.directive('pinchZoom', function () {       return {           restrict: 'A',           scope: false,           link: _link       };        function _link(scope, element, attrs) {           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;                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) {               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) {               var touches = evt.originalEvent ? evt.originalEvent.touches : evt.touches;                if (mode === '') {                   if (touches.length === 1 && scale > 1) {                        mode = 'swipe';                    } else if (touches.length === 2) {                        mode = 'pinch';                        initialScale = scale;                       initialDistance = getDistance(touches);                       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') {                   evt.preventDefault();                    distance = getDistance(touches);                   relativeScale = distance / initialDistance;                   scale = relativeScale * initialScale;                    positionX = originX * (1 - relativeScale) + initialPositionX + moveX;                   positionY = originY * (1 - relativeScale) + initialPositionY + moveY;                    transformElement();                }           }            /**            * @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 = '';           }            /**            * @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);           }            /**            * @param {number} [duration]            */           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               });           }       }    }) 
在HTML界面上相关位置 使用指令
//在元素后面添加上指令即可  <img class="solutionDetailImg  modalImgCss" id="singleImg" ng-click="hideImg()" ng-src="{{slidePage}}" pinch-zoom/>  

谢谢观看39 记得点赞 · 加油学习 8 · 有问题私信我 1万+

原文始发于:

主题测试文章,只做测试使用。发布者:夏枳★,转转请注明出处:http://www.cxybcw.com/116129.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code