JS实现移动端双指缩放和旋转方法
js实现移动端双指缩放和旋转，具体代码如下所示：
varinitHeading=0;
varrotation=0;
varlastTime;
functionsetGesture(el){
varobj={};
varistouch=false;
varstart=[];
el.addEventListener("touchstart",function(e){
if(e.touches.length>=2){//判断是否有两个点在屏幕上
istouch=true;
start=e.touches;//得到第一组两个点
obj.gesturestart&&obj.gesturestart.call(el);//执行gesturestart方法
};
},false);
document.addEventListener("touchmove",function(e){
e.preventDefault();
if(e.touches.length>=2&&istouch){
varnow=e.touches;//得到第二组两个点
varscale=getDistance(now[0],now[1])/getDistance(start[0],start[1]);//得到缩放比例，getDistance是勾股定理的一个方法
varrotation=getAngle(now[0],now[1])-getAngle(start[0],start[1]);//得到旋转角度，getAngle是得到夹角的一个方法
e.scale=scale.toFixed(2);
e.rotation=rotation.toFixed(2);
obj.gesturemove&&obj.gesturemove.call(el,e);//执行gesturemove方法
};
},false);
document.addEventListener("touchend",function(e){
if(istouch){
istouch=false;
obj.gestureend&&obj.gestureend.call(el);//执行gestureend方法
};
},false);
returnobj;
};
functiongetDistance(p1,p2){
varx=p2.pageX-p1.pageX,
y=p2.pageY-p1.pageY;
returnMath.sqrt((x*x)+(y*y));
};
functiongetAngle(p1,p2){
varx=p1.pageX-p2.pageX,
y=p1.pageY-p2.pageY;
returnMath.atan2(y,x)*180/Math.PI;
};
varbox=document.querySelector("#map3d");
varboxGesture=setGesture(box);//得到一个对象
boxGesture.gesturestart=function(){//双指开始
/*box.style.backgroundColor="yellow";*/
initHeading=map25D._coreMap.map.position.heading;
};
boxGesture.gesturemove=function(e){//双指移动
rotation=parseInt(e.rotation);
vartime=newDate().getTime();
varrealRotation=changeAngle(rotation,time);
if(realRotation){
//TODO得到旋转角度后想实现的功能
map25D._coreMap.map.position.setHeading(realRotation);
map25D._coreMap.map.renderer.update();
}
};
boxGesture.gestureend=function(){//双指结束
};
//通过时间判断解决叠加初始方向
varchangeAngle=function(heading,newTime){
if((newTime-lastTime)<2){
returnfalse;
}
lastTime=newTime;
return(initHeading+heading)
}
ps：下面看下js缩放网页比例
将当前网页缩放比变为200%
document.getElementsByTagName('body')[0].style.zoom=2
总结
以上所述是小编给大家介绍的JS实现移动端双指缩放和旋转方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。