JS实现移动端双指缩放和旋转方法


Posted in Javascript onDecember 13, 2019

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

ps:下面看下js缩放网页比例

将当前网页缩放比变为200%

document.getElementsByTagName('body')[0].style.zoom=2

总结

以上所述是小编给大家介绍的JS实现移动端双指缩放和旋转方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
使用AOP改善javascript代码
May 01 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
JavaScript运行原理分析
Feb 09 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
微信小程序返回上一页传参并刷新过程解析
Dec 13 #Javascript
Vue分页效果与购物车功能
Dec 13 #Javascript
如何在微信小程序中存setStorage
Dec 13 #Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 #Javascript
微信小程序之左右布局的实现代码
Dec 13 #Javascript
vue实现输入一位数字转汉字功能
Dec 13 #Javascript
小程序登录之支付宝授权的实现示例
Dec 13 #Javascript
You might like
PHP 面向对象 final类与final方法
2010/05/05 PHP
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
php中session与cookie的比较
2015/01/27 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
element中的$confirm的使用
2020/04/26 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
python使用递归解决全排列数字示例
2014/02/11 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
党校培训思想汇报
2014/01/03 职场文书
工作失误检讨书范文大全
2014/01/13 职场文书
应届生求职自荐信范文
2014/04/07 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
idea下配置tomcat避坑详解
2022/04/12 Servers
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android