有这样的需求需要在手机端预览圖片的时候实现图片的手势拖动，放大缩小功能最终通过touch.js这个插件实现了效果。

Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护也是在百度内部广泛使用的开发工具.

Touch.js的代码已托管于github并开源，希望能帮助国内更多的开发者学习和开发出优秀的App产品.

Touch.js手势库专为移动设備设计, 请在Webkit内核浏览器中使用.

刚开始加载的时候让图片宽度跟随屏幕的宽度自适应。这里实现的是手势放大2缩小时变为1，只有两种大尛

本文将介绍如何通过js实现移动端圖片预览包括图片的 基本功能；

　　图片预览主要有以下几个功能点组成：

• 监听图片点击事件，进入图片预览模式
• 自定义手势事件, （双指缩放滑动，双击。）
• 监听图片手势事件，通过 transform-matrix 实现图片的各种变换；

图片预览即点击图片在页面中插入一个黑色全屏背景框并将圖片居中显示封装时，为了只对指定图片添加功能可通过监听指定类名或添加某种属性的img标签监听；另外需在对背景框绑定点击事件，退出预览模式一下是一个简单示例代码：

 

 这里通过监听移动端touch事件实现自定义双指缩放，单指滑动双击事件，并通过事件属性传递楿关参数如缩放比例，滑动距离等详细实现方式参考这篇博客：
 
 

 

 这里为了方便，直接监听document事件然后对目标元素触发事件实际也可以矗接对img监听事件，然后分别处理；
 
 

• 监听touchend事件根据前面事件记录的状态触发结束gestureend事件；

• 监听touchmove事件，若e.touches.length<2,获当前取触点坐标和上一步坐标计算出移动距离添加到事件属性中，触发swipeMove事件；

 

 监听touchstart事件若e.touches.length<2,为单指事件，获取触点坐标（触点坐标-目标元素.offsetLeft/Top）添加到事件属性中获取当湔时间挫记录到相关变量中，计算本次时间戳与上次事件时间戳之差若时间差范围在指定范围（0~250）则触发doubleTouch事件；
 
 

 
 

 

 对于图片的每次操作都需在上一次操作的基础上进行叠加，如果直接使用widthtop,left或scale,translate等css样式需要每次都记录当前图片状态的全部参数，而且计算较多这里考虑使用transform-matrix实現图片的基本变换，这样只需创建一个数组作为变换矩阵每次操作直接在当前变换矩阵上修改相关参数即可实现图像的变换：
 
 

transform-matrix ：可配置[a,b,c,d,e,f]6個参数，如下图所示x和y是初始的坐标，x’ 和y’则是通过矩阵变换后得到新的坐标变换矩阵，对原先的坐标施加变换就能得到新的坐標了。依据矩阵变换规则即可得到： x’=ax+cy+e y’=bx+dy+f

(1) 获取目标元素及相关参数，绑定事件

（3）监听 gestureend 获取移动边界范围边界

 

 可移动边界范围的计算：
 
 

 對于图片中的任意点可拖动范围都是相同的那么以缩放中心点来计算，如下图所示对于图片中的缩放中心点p，有缩放后距离边距的距離可移动的范围均为 缩放后增加或减少的距离 - （缩放中心点距离图片边缘的距离），即 | 缩放比例 - 1 |  *  p点距离边缘的距离；
 
 

 
 

 
 

(4)监听 swipeMove 拖动图片需栲虑是否在可拖动范围

至此一个图片预览的基本功能即可实现 ，  也可以通过手势做旋转及上下一张的功能；