JS實現(xiàn)移動端雙指縮放和旋轉(zhuǎn)方法
更新時間:2019年12月13日 12:01:58 作者:大象
這篇文章主要介紹了JS實現(xiàn)移動端雙指縮放和旋轉(zhuǎn)方法,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
js實現(xiàn)移動端雙指縮放和旋轉(zhuǎn),具體代碼如下所示:
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); //執(zhí)行g(shù)esturestart方法
};
},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]); //得到旋轉(zhuǎn)角度,getAngle是得到夾角的一個方法
e.scale=scale.toFixed(2);
e.rotation=rotation.toFixed(2);
obj.gesturemove&&obj.gesturemove.call(el,e); //執(zhí)行g(shù)esturemove方法
};
},false);
document.addEventListener("touchend",function(e){
if(istouch){
istouch=false;
obj.gestureend&&obj.gestureend.call(el); //執(zhí)行g(shù)estureend方法
};
},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 得到旋轉(zhuǎn)角度后想實現(xiàn)的功能
map25D._coreMap.map.position.setHeading(realRotation);
map25D._coreMap.map.renderer.update();
}
};
boxGesture.gestureend=function(){ //雙指結(jié)束
};
//通過時間判斷解決疊加初始方向
var changeAngle = function (heading,newTime) {
if((newTime - lastTime) < 2){
return false;
}
lastTime = newTime;
return (initHeading + heading)
}
ps:下面看下js縮放網(wǎng)頁比例
將當前網(wǎng)頁縮放比變?yōu)?00%
document.getElementsByTagName('body')[0].style.zoom=2
總結(jié)
以上所述是小編給大家介紹的JS實現(xiàn)移動端雙指縮放和旋轉(zhuǎn)方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
使用post方法實現(xiàn)json往返傳輸數(shù)據(jù)的方法
今天小編就為大家分享一篇關(guān)于使用post方法實現(xiàn)json往返傳輸數(shù)據(jù)的方法,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-03-03
JS實現(xiàn)點擊顏色塊切換指定區(qū)域背景顏色的方法
這篇文章主要介紹了JS實現(xiàn)點擊顏色塊切換指定區(qū)域背景顏色的方法,涉及javascript操作cookie及背景色的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
javascript基于牛頓迭代法實現(xiàn)求浮點數(shù)的平方根【遞歸原理】
這篇文章主要介紹了javascript基于牛頓迭代法實現(xiàn)求浮點數(shù)的平方根,簡單說明了牛頓迭代法的原理,并結(jié)合實例分析了javascript基于遞歸的數(shù)值運算相關(guān)操作技巧,需要的朋友可以參考下2017-09-09

