多指操作的旋转和缩放（安卓版+mac版的）

朱雀 2022-05-23 08:42 182阅读 0赞

想要在手机上实现多指操作的旋转和缩放，我们知道可以使用gesturestart、gestureend、gesturechange三个事件实现，但是，这三个事件只有在ios下才有，在安卓下是没有的，那么我们想要在安卓上实现同样的操作该怎么做呢？且看下边：

ios下：多指操作的gesture相关的事件：gesturestart、gestureend、gesturechange

gesturestart：手指触摸元素，当前屏幕上有两个或两个以上的手指时，触发该事件

gestureend：当我们触发了gesturestart，然后抬起手指，这时屏幕上的手指个数小于2个或者，当前元素没有手指了，就会触发gestureend

gesturechange：当我们触发了gesturestart时，，手指位置发生变化时触发，该事件的event对象下有两个属性：

ev.scale|ev.rotation

ev.scale（缩放比）：change时，两个手指之间的距离和start时两个手指之间的距离比值

ev.rotation（旋转差）：change时两个手指形成的直线和start时两个手指形成的直线，中间形成的夹角

聊完理论，来看个小例子：图片的旋转缩放

注意：需要引入之前封装好的函数：[https://blog.csdn.net/lhjuejiang/article/details/80538044][https_blog.csdn.net_lhjuejiang_article_details_80538044]（注意，里面除了MTween这个封装函数，还有别的可以用，比如css()和cssTransform都是可以用的，我们这里用到的就是css这个封装函数）

很简单，所以就不再细说了，今天我们要讨论的重点在下面，我们说了，安卓下是没有多指操作相关的事件的，所以，这里我们就用我们熟悉的touchstart、touchmove、touchend这三个事件，实现上面的操作

注意下面我们是封装了一个函数。setGesture(init);

init:\{  
el:element//元素, (必填)  
start:fn//gesturestart要做的操作,（可选）  
change:fn//gesturechange要做的操作,（可选）  
end:fn//gestureend要做的操作（可选）

补充一点小知识：

勾股定理：已知直角三角形的两条直角边，求斜边的长度

然后看下面的代码：注意同样需要引入[https://blog.csdn.net/lhjuejiang/article/details/80538044][https_blog.csdn.net_lhjuejiang_article_details_80538044]

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <style type="text/css">
    #box {
    	margin: 100px auto;
    	width: 200px;
    	height: 200px;
    	background: url(1.jpg) no-repeat;
    	background-size: cover;
    }	
    </style>
    </head>
    <body>
    <div id="box"></div>
    <script type="text/javascript" src="m.Tween.js"></script>
    <script type="text/javascript">
    document.addEventListener('touchstart', function(e) {
    	e.preventDefault();
    });
    window.onload = function(){
    	var box = document.querySelector('#box');
    	var startRotate = 0;
    	var startScale = 0;
    	css(box,"translateZ",0.01);//开启3d硬件加速
    	setGesture({
    		el: box,
    		start: function(e){
    			startRotate = css(this,"rotate");
    			startScale = css(this,"scale");
    		},
    		change:function(e){
    			css(this,"rotate",startRotate + e.rotation);
    			css(this,"scale",startScale * e.scale);
    		}
    	})
    };
    
    function getDis(point1,point2){//用于计算两个手指之间的直线距离
    	var x = point2.x - point1.x;
    	var y = point2.y - point1.y;
    	return Math.sqrt(x*x + y*y);
    }
    // Math.atan2(y,x) 斜率 由一条直线与X轴正方向所成角的正切 返回值弧度
    // 角度转弧度: deg*Math.PI/180
    //弧度转角度: rad*180/Math.PI 
    function getDeg(point1,point2){//用于计算两个两个手指之间形成的直线与x轴的夹角
    	var x = point2.x - point1.x;
    	var y = point2.y - point1.y;
    	return Math.atan2(y,x)*180/Math.PI; 
    }
    function setGesture(init){
    	var el = init.el;
    	var isGestrue = false; 
    	var startPoint = [];
    	if(!el){//如果没有传入元素，则不执行下面的操作
    		return;
    	}
    	el.addEventListener('touchstart', function(e) {
    		if(e.touches.length >= 2){//当屏幕上的手指的个数大于等于2的时候执行类似多指操作中的start事件
    			isGestrue = true; //记录当前用户触发了gesture
    			startPoint[0] = {x:e.touches[0].pageX,y:e.touches[0].pageY};//记录第一个手指的坐标
    			startPoint[1] = {x:e.touches[1].pageX,y:e.touches[1].pageY}; //记录第二个手指的坐标
    			init.start&&init.start.call(el,e);
    		}
    	});
    	el.addEventListener('touchmove', function(e) {
    		if(isGestrue&&e.touches.length >= 2){
    			var nowPoint = [];
    			nowPoint[0] = {x:e.touches[0].pageX,y:e.touches[0].pageY};
    			nowPoint[1] = {x:e.touches[1].pageX,y:e.touches[1].pageY};
    			var startDis = getDis(startPoint[0],startPoint[1]);//计算start时两个手指之间的直线距离
    			var nowDis = getDis(nowPoint[0],nowPoint[1]);//计算手指移动时连个手指之间的距离
    			var startDeg = getDeg(startPoint[0],startPoint[1]);计算start时两个手指形成的直线与x轴的夹角
    			var nowDeg = getDeg(nowPoint[0],nowPoint[1]);计算手指移动时两个手指形成的直线与y轴的夹角
    			e.scale = nowDis/startDis;//计算缩放比
    			e.rotation = nowDeg - startDeg;//计算旋转角
    			init.change&&init.change.call(el,e);
    		}
    	});
    	el.addEventListener('touchend', function(e) {
    		if(isGestrue){
    			if(e.touches.length < 2 || e.targetTouches.length < 1){
    				isGestrue = false;
    				init.end&&init.end.call(el,e);
    			}
    		}
    	});
    }
    </script>
    </body>
    </html>

[https_blog.csdn.net_lhjuejiang_article_details_80538044]: https://blog.csdn.net/lhjuejiang/article/details/80538044