Touch.js 手势库 拖动 缩放和 旋转!!!

JavaScript09

Touch.js 手势库 拖动 缩放和 旋转!!!,第1张

上述属于网上找到的旋转缩放拖动的touch.js使用方法,

注意:在自己项目使用的时候定位的元素 只能添加 top 和 left 因为touch操作的就是元素的left和top 如果添加right和bottom在touch操作元素的时候只添加和覆盖left和top而 right和bottom不变 那么拖动缩放等真实效果可想而知了。

还有在真实项目中可拖动元素的位置不一定都是0.0坐标开始的 这个需要根据元素的真实left 和 top 的px值来更改方法cat.touchjs里面的left 和 top值。

绑定触摸事件 touchstart touchmove

监听触摸事件event.touches中触摸点的数量

在touchmove事件做判定,如果 event.touches.length==2 则记录此次两点之间的距离:Math.sqrt(Math.pow((x2-x1),2)+Math.pow((y2-y1),2))

在手指移动过程中针对每一次的两点距离进行比较。如果相对上次较大则放大,否则缩小。div的缩放通过transform:scale(x)进行控制