想要在手机上实现多指操作的旋转和缩放,我们知道可以使用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(注意,里面除了MTween这个封装函数,还有别的可以用,比如css()和cssTransform都是可以用的,我们这里用到的就是css这个封装函数)
<!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;
//gesture 相关的事件,只有ios下有,安卓没有这个事件
box.addEventListener('gesturestart', function(e) {
startScale = css(box,"scale");
startRotate = css(box,"rotate");
});
box.addEventListener('gesturechange', function(e) {
css(box,"scale",e.scale*startScale);
css(box,"rotate",e.rotation + startRotate);
});
};
</script>
</body>
</html>
很简单,所以就不再细说了,今天我们要讨论的重点在下面,我们说了,安卓下是没有多指操作相关的事件的,所以,这里我们就用我们熟悉的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
<!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>