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来定位
Feb 20 Javascript
有关DOM元素与事件的3个谜题
Nov 11 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
微信小程序返回上一页传参并刷新过程解析
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中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
Python 性能优化技巧总结
2016/11/01 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
快速了解Python开发环境Spyder
2020/06/29 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
秘书英文求职信
2014/04/16 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
无工作证明怎么写
2015/06/15 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
Go遍历struct,map,slice的实现
2021/06/13 Golang