js实现移动端双指缩放和旋转,具体代码如下所示:
var initHeading = 0;
var rotation = 0;
var lastTime;
function setGesture(el){
var obj={};
var istouch=false;
var start=[];
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){
var now=e.touches; //得到第二组两个点
var scale=getDistance(now[0],now[1])/getDistance(start[0],start[1]); //得到缩放比例,getDistance是勾股定理的一个方法
var rotation=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);
return obj;
};
function getDistance(p1, p2) {
var x = p2.pageX - p1.pageX,
y = p2.pageY - p1.pageY;
return Math.sqrt((x * x) + (y * y));
};
function getAngle(p1, p2) {
var x = p1.pageX - p2.pageX,
y = p1.pageY- p2.pageY;
return Math.atan2(y, x) * 180 / Math.PI;
};
var box=document.querySelector("#map3d");
var boxGesture=setGesture(box); //得到一个对象
boxGesture.gesturestart=function(){ //双指开始
/*box.style.backgroundColor="yellow";*/
initHeading = map25D._coreMap.map.position.heading;
};
boxGesture.gesturemove=function(e){ //双指移动
rotation = parseInt(e.rotation);
var time = new Date().getTime();
var realRotation = changeAngle(rotation,time);
if(realRotation){
//TODO 得到旋转角度后想实现的功能
map25D._coreMap.map.position.setHeading(realRotation);
map25D._coreMap.map.renderer.update();
}
};
boxGesture.gestureend=function(){ //双指结束
};
//通过时间判断解决叠加初始方向
var changeAngle = function (heading,newTime) {
if((newTime - lastTime) < 2){
return false;
}
lastTime = newTime;
return (initHeading + heading)
}
ps:下面看下js缩放网页比例
将当前网页缩放比变为200%
document.getElementsByTagName('body')[0].style.zoom=2
总结
以上所述是小编给大家介绍的JS实现移动端双指缩放和旋转方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
标签:
js缩放旋转,js,缩放网页比例
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“JS实现移动端双指缩放和旋转方法”评论...
更新日志
2025年11月10日
2025年11月10日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]