• 双指旋转操作的核心


    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)
    }
    
  • 相关阅读:
    NIO单一长连接——dubbo通信模型实现
    小谈网络游戏同步
    网络游戏同步问题综述
    TortoiseSVN客户端重新设置用户名和密码
    SVN服务器搭建和使用(三)
    SVN服务器搭建和使用(二)
    SVN服务器搭建和使用(一)
    Firefly 流程架构
    unity3d 手机震动
    Unity AssetBundle爬坑手记
  • 原文地址:https://www.cnblogs.com/ezhar/p/14746365.html
Copyright © 2020-2023  润新知