说在前面
上篇文章说了ios上的多指操作，那为什么不放在一起，把安卓的也一起讲了，因为安卓的存在兼容问题，gesturestart，gesturechange等事件安卓上都是没有的，这些只存在于ios设备上，所以这些事件安卓设备上无效，需要自己封装。
第一步：定义一个匿名自执行函数
匿名自执行函数的优势在前面的文章有，这里不多说。
(function (w) {
})(window);
第二步: 基本架构实现
(function (w) {
//给w gesture 方法
w.gesture = function (ele,callback) {
}
})();
第三步: 添加封装的功能函数
(function (w) {
//给w gesture 方法
w.gesture = function (ele,callback) {
let isStart = false;
//判断是否触发了触摸事件
ele.addEventListener('touchstart',function (event) {
if(event.touches.length >= 2){
isStart = true ;
//记录两个触点间的初始距离
this.startDistance =getDistance(event.touches[0],event.touches[1]);
//记录两个触点的初始角度
this.startDeg =getDeg(event.touches[0],event.touches[1]);
//判断是否传入回调，调用回调函数
if(callback && typeof callback['start'] === "function"){
callback['start']();
}
}
});
ele.addEventListener('touchmove',function (event) {
//判断移动时屏幕上的触点个数
if(event.touches.length >= 2){
//计算两个触点的实时距离
const currDistance = getDistance(event.touches[0], event.touches[1]);
//记录两个触点的实时角度
const currDeg = getDeg(event.touches[0], event.touches[1]);
//计算实时距离与初始距离的比例，传入event的属性中
event.scale = currDistance / this.startDistance;
//计算实时角度与初始角度的差值，传入event的属性中
event.rotation = currDeg - this.startDeg;
//判断是否传入回调，调用回调函数
if(callback && typeof callback['change'] === "function"){
//将event传回去
callback['change'](event);
}
}
});
// 手指离开当前元素时，先判断当前的触点是否小于2，是否曾触发过touchstart事件
ele.addEventListener('touchend',function (event) {
if(event.touches.length < 2 && isStart){
//此时调用end回调
if (callback && typeof(callback['change']) === 'function') {
callback['end']();
}
//重置isStart为false
isStart = false;
}
});
// 获取两个点之间的距离
function getDistance(touch1,touch2) {
const a = touch1.clientX - touch2.clientX;
const b = touch1.clientY - touch2.clientY;
//勾股定理，得出两点距离长度
return Math.sqrt(a * a + b * b);
}
// 获取两个触点的角度
function getDeg(touch1,touch2) {
const x = touch1.clientX - touch2.clientX;
const y = touch1.clientY - touch2.clientY;
//tan值 = 对边Y / 临边X
const radian = Math.atan2(y, x);
return radian * 180 / Math.PI;
}
}
})();
那么，这个库就已经封装好了，引入调用就ok
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Document</title>
<style>
#con{
width: 300px;
height: 300px;
line-height: 100px;
text-align: center;
font-size: 48px;
color: black;
position: absolute;
top: 50px;
left: 50px;
background: greenyellow;
}
</style>
<script src="./android.js"></script>
</head>
<body>
<div id="con">
</div>
<script>
var con = document.getElementById('con');
gesture(con,{
start:function () {
// alert("触发了多指操作")
},
change:function (event) {
alert("移动了")
}
})
</script>
</body>
</html>
这里只是简单的处理，大家可以在此基础上再进行优化和新功能添加。