ionic图片点击放大，双指缩放
对于这个功能，也是查找了好多的资料，到现在其中的代码也需要好好研究研究，这个方法的缺点就是每次只能显示一张图片，并对其进行放大~至于多张图片，以后再研究~
1、写好模板页(comImageBox.html)
<ion-header-bar align-title="center" class="bar-calm deleteIcon" id="deleteIcon" style="display:none;position:relative;" ng-if="isDelete"> <a ng-click="hideBigImage();" class="button button-clear ion ion-chevron-left">返回</a> <a ng-click="deleteImage({{Url}});" class="button button-large button-clear ion ion-trash-a" style="font-size:25px;right:12px;position: absolute;"></a> </ion-header-bar> <div class=LightBox ng-click=hideBigImage() style="display:none"> <div class=ImgViewer> <ul class=swiper-wrapper> <li class=swiper-slide> <img src={{Url}} ng-show="!showVideo"> <video style="bottom:50px;background-color:black;" poster="http://www.mjlms.net/mjlms/mobile/img/1.jpg" ng-show="showVideo" width="100%" height="85%" ng-repeat="v in arrayVideo track by $index" ng-click="openLink('{{v}}');" controls="controls" ng-src="{{v| to_trusted}}" webkit-playsinline="true"> </video> </li> </ul> </div> </div>
2、 Directive（指令）
关于directive指令的资料：http://blog.csdn.net/evankaka/article/details/51232895
1 .directive('comImageBox', ['$state', '$rootScope', function ($state, $rootScope) { 2 var comImageBox = { 3 restrict: 'E', //element name <com-my-favor-item></com-my-favor-item> 4 templateUrl: 'templates/comImageBox.html', 5 transclude: false, 6 templateNamespace: 'html', 7 scope: false, 8 link: { 9 pre: function preLink(scope, element, attrs, controller) { 10 //图片大小 11 var elWidth, elHeight; 12 //元素大小 13 var outWidth, outHeight; 14 // 当前操作模式 pinch:缩放 swipe:滑动 15 var mode = ''; 16 17 // 双指触摸点的距离 (缩放模式) 18 var distance = 0; 19 var initialDistance = 0; 20 21 // 图片缩放参数 22 var scale = 1; 23 var relativeScale = 1; 24 var initialScale = 1; 25 var maxScale = parseInt(attrs.maxScale, 10); 26 if (isNaN(maxScale) || maxScale <= 1) { 27 maxScale = 20; 28 } 29 30 // position of the upper left corner of the element 31 var positionX = 0; 32 var positionY = 0; 33 34 var initialPositionX = 0; 35 var initialPositionY = 0; 36 37 // central origin (缩放模式) 38 var originX = 0; 39 var originY = 0; 40 41 // start coordinate and amount of movement （滑动模式） 42 var startX = 0; 43 var startY = 0; 44 var moveX = 0; 45 var moveY = 0; 46 47 48 outWidth = $(element[0].lastChild).width(); 49 outHeight = $(element[0].lastChild).height(); 50 51 52 scope.Url = ""; 53 scope.bigImage = false; 54 55 //显示图片(此处所传参数，是根据项目需求使用，必传参数只有imggeName) 56 scope.showBigImage = function(type,imageName,index,id) { 57 scope.index=index; 58 scope.Url = imageName; 59 scope.showVideo=false; 60 scope.deleteId=id; 61 scope.type=type; 62 if(type=='video'||type=="selectVideo"||type=='video1'){ 63 scope.showVideo=true; 64 } 65 if(scope.type=='selectimg'||scope.type=='selectAfterImg'||scope.type=='selectVideo'){ 66 scope.isDelete=false; 67 } 68 scope.bigImage = true; 69 70 $(element[0].lastChild).show(10, function() { 71 $(".deleteIcon").css("display","block"); 72 $(".Main .tab-nav").hide(); 73 $(".LightBox").show(); 74 $(this).find("img").css({width:"100%"}); 75 elWidth = $(this).find("img").width(); 76 elHeight = $(this).find("img").height(); 77 }); 78 79 //console.info(element.find("img")); 80 //每次点击放大图片之后需要绑定事件 81 element.find("img").on('touchstart', touchstartHandler); 82 element.find("img").on('touchmove', touchmoveHandler); 83 element.find("img").on('touchend', touchendHandler); 84 }; 85 86 87 //隐藏图片 88 scope.hideBigImage = function() { 89 scope.bigImage = false; 90 /*$("ion-header-bar").show();*/ 91 $(".Main .tab-nav").show(); 92 $(".LightBox").hide(5); 93 $(".deleteIcon").css("display","none"); 94 $(".LightBox").hide(5); 95 96 // 当前操作模式 pinch:缩放 swipe:滑动 97 mode = ''; 98 99 // 双指触摸点的距离 (缩放模式) 100 distance = 0; 101 initialDistance = 0; 102 103 // 图片缩放参数 104 scale = 1; 105 relativeScale = 1; 106 initialScale = 1; 107 maxScale = parseInt(attrs.maxScale, 10); 108 if (isNaN(maxScale) || maxScale <= 1) { 109 maxScale = 20; 110 } 111 112 // position of the upper left corner of the element 113 positionX = 0; 114 positionY = 0; 115 116 initialPositionX = 0; 117 initialPositionY = 0; 118 119 // central origin (缩放模式) 120 originX = 0; 121 originY = 0; 122 123 // start coordinate and amount of movement （滑动模式） 124 startX = 0; 125 startY = 0; 126 moveX = 0; 127 moveY = 0; 128 129 transformElement(); 130 }; 131 132 133 /****************************************** 图片缩放功能开始 20161104 qinxiankang 添加 ***************************/ 134 135 /** 136 * @param {object} 点击开始，初始化 137 */ 138 function touchstartHandler(evt) { 139 //console.info("touchstart"); 140 var touches = evt.originalEvent ? evt.originalEvent.touches : evt.touches; 141 142 startX = touches[0].clientX; 143 startY = touches[0].clientY; 144 initialPositionX = positionX; 145 initialPositionY = positionY; 146 moveX = 0; 147 moveY = 0; 148 } 149 150 /** 151 * @param {object} 手指移动 152 */ 153 function touchmoveHandler(evt) { 154 //console.info("touch move"); 155 var touches = evt.originalEvent ? evt.originalEvent.touches : evt.touches; 156 157 var leftX = positionX - elWidth * scale / 2 + outWidth / 2; 158 var rightX = outWidth - (leftX + elWidth * scale); 159 var topY = positionY - elHeight * scale / 2 + outHeight / 2; 160 var bottomY = outHeight - (topY + elHeight * scale); 161 162 163 164 if (mode === '') { 165 if (touches.length === 1) { 166 167 mode = 'swipe'; 168 169 } else if (touches.length === 2) { 170 171 mode = 'pinch'; 172 173 initialScale = scale; 174 initialDistance = getDistance(touches); 175 originX = touches[0].clientX - 176 parseInt((touches[0].clientX - touches[1].clientX) / 2, 10) - 177 element.find("img")[0].offsetLeft - initialPositionX; 178 originY = touches[0].clientY - 179 parseInt((touches[0].clientY - touches[1].clientY) / 2, 10) - 180 element.find("img")[0].offsetTop - initialPositionY; 181 182 } 183 } 184 185 if (mode === 'swipe') { 186 //移动 187 evt.preventDefault(); 188 moveX = touches[0].clientX - startX; 189 moveY = touches[0].clientY - startY; 190 191 positionX = initialPositionX + moveX; 192 positionY = initialPositionY + moveY; 193 194 transformElement(); 195 196 //左右有空余，左右间距相同，禁止上下滑动 197 if (leftX > 0 && rightX > 0) { 198 positionX = 0; 199 transformElement(); 200 } 201 //上下都有空余，禁止左右滑动 202 if (topY > 0 && bottomY > 0) { 203 positionY = 0; 204 transformElement(); 205 } 206 207 208 209 } else if (mode === 'pinch') { 210 //缩放 211 evt.preventDefault(); 212 distance = getDistance(touches); 213 relativeScale = distance / initialDistance; 214 215 // 216 217 218 scale = relativeScale * initialScale; 219 220 positionX = originX * (1 - relativeScale) + initialPositionX + moveX; 221 positionY = originY * (1 - relativeScale) + initialPositionY + moveY; 222 223 transformElement(); 224 positionX = 0; 225 positionY = 0; 226 transformElement(); 227 } 228 229 230 231 //console.info(leftX, topY, rightX, bottomY); 232 } 233 234 /** 235 * @param {object} 点击结束 236 */ 237 function touchendHandler(evt) { 238 /* console.info("图片大小", elWidth, elHeight); 239 console.info("容器大小", outWidth, outHeight);*/ 240 241 //console.info("touch end"); 242 var touches = evt.originalEvent ? evt.originalEvent.touches : evt.touches; 243 244 if (mode === '' || touches.length > 0) { 245 return; 246 } 247 //缩放比例小于原比例 248 if (scale < 1) { 249 250 scale = 1; 251 positionX = 0; 252 positionY = 0; 253 254 } else if (scale > maxScale) { 255 //缩放比例过大 256 scale = maxScale; 257 relativeScale = scale / initialScale; 258 positionX = originX * (1 - relativeScale) + initialPositionX + moveX; 259 positionY = originY * (1 - relativeScale) + initialPositionY + moveY; 260 261 } 262 263 var leftX = positionX - elWidth * scale / 2 + outWidth / 2; 264 var rightX = outWidth - (leftX + elWidth * scale); 265 var topY = positionY - elHeight * scale / 2 + outHeight / 2; 266 var bottomY = outHeight - (topY + elHeight * scale); 267 268 if (leftX > 0 && rightX < 0) { 269 //leftX=0; 270 positionX = elWidth * scale / 2 - outWidth / 2; 271 transformElement(); 272 } else if (leftX < 0 && rightX > 0) { 273 //rightX=0; 274 positionX = outWidth / 2 - elWidth * scale / 2; 275 transformElement(); 276 } 277 if (topY < 0 && bottomY > 0) { 278 positionY = outHeight / 2 - elHeight * scale / 2; 279 280 transformElement(); 281 } else if (topY > 0 && bottomY < 0) { 282 positionY = elHeight * scale / 2 - outHeight / 2; 283 transformElement(); 284 } 285 286 287 leftX = positionX - elWidth * scale / 2 + outWidth / 2; 288 rightX = outWidth - (leftX + elWidth * scale); 289 topY = positionY - elHeight * scale / 2 + outHeight / 2; 290 bottomY = outHeight - (topY + elHeight * scale); 291 //console.info(leftX, rightX, topY, bottomY); 292 if (topY > 0 && bottomY > 0) { 293 //让上下边距相同，只允许左右滑动 294 //console.info(1); 295 positionY = 0; 296 transformElement(); 297 } 298 if (leftX > 0 && rightX > 0) { 299 //console.info(2); 300 positionX = 0; 301 transformElement(); 302 } 303 leftX = positionX - elWidth * scale / 2 + outWidth / 2; 304 rightX = outWidth - (leftX + elWidth * scale); 305 topY = positionY - elHeight * scale / 2 + outHeight / 2; 306 bottomY = outHeight - (topY + elHeight * scale); 307 //console.info(leftX, rightX,topY, bottomY); 308 transformElement(0.1); 309 mode = ''; 310 311 } 312 313 /** 314 * @param {Array} 双指touch位置 315 * @return {number} 316 */ 317 function getDistance(touches) { 318 var d = Math.sqrt(Math.pow(touches[0].clientX - touches[1].clientX, 2) + 319 Math.pow(touches[0].clientY - touches[1].clientY, 2)); 320 return parseInt(d, 10); 321 } 322 323 /** 324 * @param {number} 动画时间 325 */ 326 function transformElement(duration) { 327 //console.info("transform"); 328 var transition = duration ? 'all cubic-bezier(0,0,.5,1) ' + duration + 's' : ''; 329 var matrixArray = [scale, 0, 0, scale, positionX, positionY]; 330 var matrix = 'matrix(' + matrixArray.join(',') + ')'; 331 332 element.find("img").css({ 333 '-webkit-transition': transition, 334 transition: transition, 335 '-webkit-transform': matrix + ' translate3d(0,0,0)', 336 transform: matrix 337 }); 338 } 339 /****************************************** 图片缩放功能结束****************************/ 340 341 }, 342 343 post: function postLink(scope, element, attrs, controller) { 344 } 345 } 346 }; 347 return comImageBox; 348 }]);
3、在应用界面里使用dom元素引用
1 <div style="clear:both;"margin:10px 10px;"> 2 <img ng-repeat="img in arrayPause track by $index" ng-src="{{img}}" width="132px;" height="173px;" ng-click="showBigImage('pauseImg',img,$index);" style="margin-left:5px;"> 3 </div> 4 <com-Image-Box></com-Image-Box>
参考资料：http://blog.csdn.net/half_open/article/details/53047252
