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)
    }

你可能感兴趣的:(javascript,前端)