zoukankan      html  css  js  c++  java
  • 双指旋转操作的核心

    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)
    }
    
  • 相关阅读:
    Asp.net core 项目的发布和运行环境部署完整介绍(Window+IIS7)
    让IIS支持PUT和Delete请求
    js实现图片打点
    Ogre空间变换,setPosition(),setDerivedPosition()和translate()的正确使用。
    obs 工作室模式
    obs局域网串流插件之“OBSNDI”
    obs 媒体源获取之“VLC视频源”
    谈谈php中的mvc
    PHP 开发之MVC架构
    一个简单的php MVC实例
  • 原文地址:https://www.cnblogs.com/ezhar/p/14746365.html
Copyright © 2011-2022 走看看