移动端多指事件

59 阅读 0 评论 39 点赞

我是靠谱客的博主爱笑钻石，最近开发中收集的这篇文章主要介绍移动端多指事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

ios下的多指事件


ios下的默认api.
多指事件
==>
gesturestart
gesturechange
gestureend
e.scale
===> 缩放的倍数
相乘
eg: 0.5*0.2
e.rotation ===> 旋转的度数
相加
eg: 75deg+45deg.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name='viewport' content='user-scalable=no,width=device-width'>
<title>ios多指事件</title>
<style type="text/css">
* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
#box {width: 100px; height: 100px; background: #ddd;}
</style>
</head>
<body>
<div id="box"></div>
<script src='./js/transform.js'></script>
<script type="text/javascript">
/*
ios下的默认api.
多指事件
==>
gesturestart
gesturechange
gestureend
e.scale
===> 缩放的倍数
相乘
eg: 0.5*0.2
e.rotation ===> 旋转的度数
相加
eg: 75deg+45deg.
transform残影问题.
添加translateZ(0)
*/
document.addEventListener('touchstart',function(e){
var e = e || window.event;
e.preventDefault();
})
box.addEventListener('gesturestart',touch,false);
box.addEventListener('gesturechange',touch,false);
box.addEventListener('gestureend',touch,false);
var startS = 1,
startR = 0;
// cssTransform(box,'scale','0.5');
function touch(e) {
switch(e.type){
case 'gesturestart':
startS = cssTransform(box,'scale');
startR = cssTransform(box,'rotate');
break;
case 'gesturechange':
var nowS = e.scale;
var nowR = e.rotation;
cssTransform( box,'scale', nowS*startS);
cssTransform( box,'rotate', nowR+startS);
break;
case 'gestureend':
break;
}
}
</script>
</body>
</html>

这里写图片描述

Android下的多指事件

需要封装

Android下的多指事件封装,判断是否是多指事件.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Android下的多指事件封装</title>
<style type="text/css">
* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
#box {width: 100px; height: 100px; background: #ddd;}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
/*
touches.
判断是不是多指事件.
*/
var callback = {
start(){
this.style.background = 'red';
},
move(){
this.innerHTML = num++;
},
end(){
this.style.background = '';
}
},
// 开关
isGesture = false,
num = 0;
gesture(box,callback);
function gesture(obj,callback){
obj.addEventListener('touchstart',function (e) {
var touches = e.touches;
if(touches.length >= 2){ //是否为多指.2
isGesture = true;
callback.start&&callback.start.call(this);
};
})
obj.addEventListener('touchmove',function (e) {
var touches = e.touches;
if(touches.length >= 2 && isGesture){ //是否为多指.2
isGesture = true;
callback.move&&callback.move.call(this);
};
})
obj.addEventListener('touchend',function (e) {
if(isGesture) {
callback.end&&callback.end.call(this);
}
isGesture = false;
})
}
</script>
</body>
</html>

Android下的多指事件scale原理

scale = 移动过的两指距离
/ 按下时两指距离

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Android下的多指事件scale</title>
<style type="text/css">
* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
#box {width: 100px; height: 100px; background: #ddd;}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
/*
touches.
判断是不是多指事件.
*/
var callback = {
start(){
this.style.background = 'red';
},
move(e){
// 之前的比例.
需要添上系数. 变化大.0.1
var oddS = cssTransform( this,'scale' );
cssTransform( this,'scale',e.scale*oddS );
},
end(){
this.style.background = '';
}
},
// 开关
isGesture = false,
num = 0,
startDis = 0;
function getPiontScale(Piont1,Piont2){
// 勾股定理.
var x = Piont1.pageX - Piont2.pageX,
y = Piont1.pageY - Piont2.pageY;
return Math.sqrt(Math.pow(x, 2) + Math.pow(y,2));
}
gesture(box,callback);
function gesture(obj,callback){
obj.addEventListener('touchstart',function (e) {
var touches = e.touches;
if(touches.length >= 2){ //是否为多指.2
isGesture = true;
// 两点距离.
startDis = getPiontScale(touches[0],touches[1]);
callback.start&&callback.start.call(this);
};
})
obj.addEventListener('touchmove',function (e) {
var touches = e.touches;
if(touches.length >= 2 && isGesture){ //是否为多指.2
isGesture = true;
// 缩放后两指的距离
var nowDis = getPiontScale(touches[0],touches[1]);
// 比例.
e.scale = nowDis/startDis;
callback.move&&callback.move.call(this,e);
};
})
obj.addEventListener('touchend',function (e) {
if(isGesture) {
callback.end&&callback.end.call(this);
}
isGesture = false;
})
}
</script>
</body>
</html>

Android下的多指事件rotation原理

旋转的角度 = 两个角度的差值(同一象限.)
利用反正弦 知道x,y ==>求出弧度 再转换为角度.

这里写图片描述


// 之前的比例.
需要添上系数. 变化大.0.1
var oddS = cssTransform( this,'scale' ),
oddR = cssTransform(this,'rotate');
// 缩放相乘
cssTransform( this,'scale',e.scale*oddS );
// 旋转相加
cssTransform( this,'rotate',e.rotation + oddR );

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Android下的多指事件rotation</title>
<style type="text/css">
* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
#box {width: 100px; height: 100px; background: #ddd;}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
/*
touches.
判断是不是多指事件.
*/
var callback = {
start(){
this.style.background = 'red';
},
move(e){
// 之前的比例.
需要添上系数. 变化大.0.1
var oddS = cssTransform( this,'scale' ),
oddR = cssTransform(this,'rotate');
// 缩放相乘
cssTransform( this,'scale',e.scale*oddS );
// 旋转相加
cssTransform( this,'rotate',e.rotation + oddR );
},
end(){
this.style.background = '';
}
},
// 开关
isGesture = false,
num = 0,
start = {
distance: 0,
deg : 0
};
function getPiontScale(Piont1,Piont2){
// 勾股定理.
var x = Piont1.pageX - Piont2.pageX,
y = Piont1.pageY - Piont2.pageY;
return Math.sqrt(Math.pow(x, 2) + Math.pow(y,2));
}
// 弧度转换为角度
function getDeg(Piont1,Piont2){
var x = Piont1.pageX - Piont2.pageX,
y = Piont1.pageY - Piont2.pageY;
// 反正弦tan
return Math.atan2(y,x)*180/Math.PI;
}
gesture(box,callback);
function gesture(obj,callback){
obj.addEventListener('touchstart',function (e) {
var touches = e.touches;
if(touches.length >= 2){ //是否为多指.2
isGesture = true;
// 两点距离.
start.distance = getPiontScale(touches[0],touches[1]);
start.deg = getDeg(touches[0],touches[1]);
callback.start&&callback.start.call(this);
};
})
obj.addEventListener('touchmove',function (e) {
var touches = e.touches;
if(touches.length >= 2 && isGesture){ //是否为多指.2
isGesture = true;
// 缩放后两指的距离
var nowDis = getPiontScale(touches[0],touches[1]),
nowDeg = getPiontScale(touches[0],touches[1]);
// 比例.
e.scale = nowDis/start.distance;
// 旋转的角度 = 两个角度的差值(同一象限.)
e.rotation = nowDeg - start.deg;
callback.move&&callback.move.call(this,e);
};
})
obj.addEventListener('touchend',function (e) {
if(isGesture) {
callback.end&&callback.end.call(this);
}
isGesture = false;
})
}
</script>
</body>
</html>

多指缩放,旋转实例

封装好的.geture.js


/*
多指事件.gesture(obj,callback)
var callback = {
start(e){
},
move(e){
},
end(e){
}
}
*/
function getPiontScale(Piont1,Piont2){
// 勾股定理.
var x = Piont1.pageX - Piont2.pageX,
y = Piont1.pageY - Piont2.pageY;
return Math.sqrt(Math.pow(x, 2) + Math.pow(y,2));
}
// 弧度转换为角度
function getDeg(Piont1,Piont2){
var x = Piont1.pageX - Piont2.pageX,
y = Piont1.pageY - Piont2.pageY;
// 反正弦tan
对边/临边
return Math.atan2(y,x)*180/Math.PI;
}
function gesture(obj,callback){
// 开关
var isGesture = false,
//初始值
start = {
distance: 0,
deg : 0
};
obj.addEventListener('touchstart',function (e) {
e.stopPropagation();
var touches = e.touches;
if(touches.length >= 2){ //是否为多指.2
isGesture = true;
// 两点距离.
start.distance = getPiontScale(touches[0],touches[1]);
start.deg = getDeg(touches[0],touches[1]);
callback.start&&callback.start.call(this);
};
})
obj.addEventListener('touchmove',function (e) {
var touches = e.touches;
if(touches.length >= 2 && isGesture){ //是否为多指.2
// 缩放后两指的距离
var nowDis = getPiontScale(touches[0],touches[1]),
nowDeg = getPiontScale(touches[0],touches[1]);
// 比例.
e.scale = nowDis/start.distance;
// 旋转的角度 = 两个角度的差值(同一象限.)
e.rotation = nowDeg - start.deg;
callback.move&&callback.move.call(this,e);
};
})
obj.addEventListener('touchend',function (e) {
if(isGesture) {
callback.end&&callback.end.call(this);
}
isGesture = false;
})
}

将图片进行缩放旋转


// 防止残影.
cssTransform(Canvas,'translateZ',0);
// 添加多指事件;
// 初始值
var startS = 1,
startR = 0;
gesture(bg,{
start(e){
// 获取
startS = cssTransform(Canvas,'scale');
startR = cssTransform(Canvas,'rotate');
},
move(e){
var scaleVal = stratS*e.scale,
rotateVal = startR+e.rotation;
// 缩放边界值.
if(scaleVal > 1.5){
scaleVal = 1.5;
}else if(scaleVal < 0.5){
scaleVal = 0.5;
}
cssTransform(Canvas,'scale',scaleVal);
cssTransform(Canvas,'rotate',rotateVal);
},
end(e){
}
});