您好,登錄后才能下訂單哦!
js實(shí)現(xiàn)移動(dòng)端雙指縮放和旋轉(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){ //判斷是否有兩個(gè)點(diǎn)在屏幕上 istouch=true; start=e.touches; //得到第一組兩個(gè)點(diǎn) 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; //得到第二組兩個(gè)點(diǎn) var scale=getDistance(now[0],now[1])/getDistance(start[0],start[1]); //得到縮放比例,getDistance是勾股定理的一個(gè)方法 var rotation=getAngle(now[0],now[1])-getAngle(start[0],start[1]); //得到旋轉(zhuǎn)角度,getAngle是得到夾角的一個(gè)方法 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); //得到一個(gè)對(duì)象 boxGesture.gesturestart=function(){ //雙指開始 /*box.style.backgroundColor="yellow";*/ initHeading = map25D._coreMap.map.position.heading; }; boxGesture.gesturemove=function(e){ //雙指移動(dòng) rotation = parseInt(e.rotation); var time = new Date().getTime(); var realRotation = changeAngle(rotation,time); if(realRotation){ //TODO 得到旋轉(zhuǎn)角度后想實(shí)現(xiàn)的功能 map25D._coreMap.map.position.setHeading(realRotation); map25D._coreMap.map.renderer.update(); } }; boxGesture.gestureend=function(){ //雙指結(jié)束 }; //通過時(shí)間判斷解決疊加初始方向 var changeAngle = function (heading,newTime) { if((newTime - lastTime) < 2){ return false; } lastTime = newTime; return (initHeading + heading) }
ps:下面看下js縮放網(wǎng)頁比例
將當(dāng)前網(wǎng)頁縮放比變?yōu)?00%
document.getElementsByTagName('body')[0].style.zoom=2
總結(jié)
以上所述是小編給大家介紹的JS實(shí)現(xiàn)移動(dòng)端雙指縮放和旋轉(zhuǎn)方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。