js移动端双指缩放和旋转
来源:互联网 发布:乐视手机mac拨号 编辑:程序博客网 时间:2024/06/05 09:05
在iOS上有一组双指事件gesturestart、gesturechange、gestureend
gesturestart触发条件是当屏幕上有两根或以上手指并且第二根手指放在当前元素上
当两根手指移动时触发gesturechange,可以得到两个值
event.scale 缩放比例
event.rotation 旋转角度
但是这一组事件只能在iOS上使用,安桌上是没有的
在安卓上需要用touchstart、touchmove、touchend去实现
利用第一组两个点的x轴、y轴坐标求出两个点之间的距离,在得到第二组点的距离相除,得到缩放比例
利用第一组点的夹角与第二组点的夹角相减得到旋转角度
下面是我写的一个方法
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("#box"); var boxGesture=setGesture(box); //得到一个对象 boxGesture.gesturestart=function(){ //双指开始 box.style.backgroundColor="yellow"; }; boxGesture.gesturemove=function(e){ //双指移动 box.innerHTML = e.scale+"<br />"+e.rotation; box.style.transform="scale("+e.scale+") rotate("+e.rotation+"deg)";//改变目标元素的大小和角度 }; boxGesture.gestureend=function(){ //双指结束 box.innerHTML=""; box.style.cssText="background-color:red"; };
这样在iOS和安卓下都可以用这一个方法
1 0
- js移动端双指缩放和旋转
- 13 WebGL移动、旋转和缩放的 旋转和缩放
- AR移动端缩放和旋转
- Unity设置物体移动、缩放和旋转
- osg模型的移动,旋转和缩放
- 图片 旋转,缩放,移动
- CGAffineTransform-缩放、移动、旋转
- js控制div缩放和移动
- O3D 例2- 立方体的移动、缩放和旋转
- O3D 例2- 立方体的移动、缩放和旋转
- 【IOS】使用手势对UIImageView进行缩放、旋转和移动
- 【IOS】使用手势对UIImageView进行缩放、旋转和移动
- Android Animation动画的淡入淡出、旋转、缩放和移动
- 使用手势对UIImageView进行缩放、旋转和移动
- 使用手势对UIImageView进行缩放、旋转和移动
- 12 WebGL移动、旋转和缩放中的平移
- 【IOS】使用手势对UIImageView进行缩放、旋转和移动
- Unity移动旋转比例缩放
- Git 学习
- ob_start,ob_end_clean,ob_get_contents函数
- 使用Struts2的输入校验(三)--短路校验器
- 二项式定理
- 面向对象的特征之三多态性
- js移动端双指缩放和旋转
- 最简单的加法运算1001,1002
- Jsp脚本段与声明的区别
- Leetcode.寻找不重复的最长子字符串
- WebStorage
- HM-16.0编码过程:将YUV文件编码成HEVC格式的码流
- 2017年能叫醒你的25张图,你看到第几张会醒?
- 计算机原理学习(2)-- 存储器和I/O设备和总线
- office 2013最新激活密钥及破解激活方法