使用:setGesture(init);
参数说明:init是一个对象
init:{
el:element//元素, (必填)start:fn//gesturestart要做的操作,(可选)
change:fn//gesturechange要做的操作,(可选)
end:fn//gestureend要做的操作(可选)
}
补充小知识:
勾股定理:已知直角三角形的两条直角边,求斜边的长度
ok:看代码吧:
function getDis(point1,point2){//用于计算两个手指之间的直线距离 var x = point2.x - point1.x; var y = point2.y - point1.y; return Math.sqrt(x*x + y*y); } // Math.atan2(y,x) 斜率 由一条直线与X轴正方向所成角的正切 返回值弧度 // 角度转弧度: deg*Math.PI/180 //弧度转角度: rad*180/Math.PI function getDeg(point1,point2){//用于计算两个两个手指之间形成的直线与x轴的夹角 var x = point2.x - point1.x; var y = point2.y - point1.y; return Math.atan2(y,x)*180/Math.PI; } function setGesture(init){ var el = init.el; var isGestrue = false; var startPoint = []; if(!el){//如果没有传入元素,则不执行下面的操作 return; } el.addEventListener('touchstart', function(e) { if(e.touches.length >= 2){//当屏幕上的手指的个数大于等于2的时候执行类似多指操作中的start事件 isGestrue = true; //记录当前用户触发了gesture startPoint[0] = {x:e.touches[0].pageX,y:e.touches[0].pageY};//记录第一个手指的坐标 startPoint[1] = {x:e.touches[1].pageX,y:e.touches[1].pageY}; //记录第二个手指的坐标 init.start&&init.start.call(el,e); } }); el.addEventListener('touchmove', function(e) { if(isGestrue&&e.touches.length >= 2){ var nowPoint = []; nowPoint[0] = {x:e.touches[0].pageX,y:e.touches[0].pageY}; nowPoint[1] = {x:e.touches[1].pageX,y:e.touches[1].pageY}; var startDis = getDis(startPoint[0],startPoint[1]);//计算start时两个手指之间的直线距离 var nowDis = getDis(nowPoint[0],nowPoint[1]);//计算手指移动时连个手指之间的距离 var startDeg = getDeg(startPoint[0],startPoint[1]);计算start时两个手指形成的直线与x轴的夹角 var nowDeg = getDeg(nowPoint[0],nowPoint[1]);计算手指移动时两个手指形成的直线与y轴的夹角 e.scale = nowDis/startDis;//计算缩放比 e.rotation = nowDeg - startDeg;//计算旋转角 init.change&&init.change.call(el,e); } }); el.addEventListener('touchend', function(e) { if(isGestrue){ if(e.touches.length < 2 || e.targetTouches.length < 1){ isGestrue = false; init.end&&init.end.call(el,e); } } }); }