touch--单点
targetTouches、 changeTouches
多点：
targetTouches--当前物体上的手指数
*不同物体上的手指不会互相干扰
不需要做多点触摸的时候---平均值：
x=∑ 所有手指x /n
y=∑ 所有手指y /n
手势识别：
1.
2.
--------------------------------------------------------------------------------
多点触摸：
1.避免影响——消除干扰
平均坐标
2.需要多点——手势
i.旋转 后角度-前角度
ii.缩放 后距离/前距离
--------------------------------------------------------------------------------
Math.atan(b/a);
Math.atan2(b, a);
--------------------------------------------------------------------------------
角度：360
弧度：2·PI
360角度=2PI弧度
1角度=PI/180弧度
n角度=n*PI/180弧度
2PI弧度=360角度
1弧度=180/PI角度
n弧度=n*180/PI角度
--------------------------------------------------------------------------------
1.思路：
旋转 角度-角度
缩放 距离/距离
2.弧度：
弧度 换算 角度
--------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title></title>
<style media="screen">
body {height:2000px;}
.box {200px; height:200px; background:#CCC; border:1px solid black; position:absolute; line-height:200px; text-align:center; font-size:40px; left:50%; top:150px; margin-left:-100px; transform: rotate(0deg)}
</style>
<script>
function calcAng(touch1, touch2){
let x=touch1.clientX-touch2.clientX;
let y=touch1.clientY-touch2.clientY;
return Math.atan2(y, x)*180/Math.PI;
}
window.onload=function (){
let oBox=document.getElementsByClassName('box')[0];
let ang1,ang2;
let ang=0,old_ang;
document.addEventListener('touchstart', function (ev){
if(ev.targetTouches.length>=2){
ang1=calcAng(ev.targetTouches[0], ev.targetTouches[1]);
old_ang=ang;
}
}, false);
document.addEventListener('touchmove', function (ev){
if(ev.targetTouches.length>=2){
ang2=calcAng(ev.targetTouches[0], ev.targetTouches[1]);
ang=old_ang+ang2-ang1;
oBox.style.transform=`rotate(${ang}deg)`;
}
}, false);
};
</script>
</head>
<body>
<input type="text" name="" value="">
<input type="button" value="按钮" onclick="document.querySelector('.box').style.background='yellow';">
<div class="box">asdfasdf</div>
</body>
</html>
缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title></title>
<style media="screen">
body {height:2000px;}
.box {200px; height:200px; background:#CCC; border:1px solid black; position:absolute; line-height:200px; text-align:center; font-size:40px; left:50%; top:150px; margin-left:-100px; transform:scale(1);}
</style>
<script>
function calcDistance(touch1, touch2){
return Math.sqrt(Math.pow(touch1.clientX-touch2.clientX, 2), Math.pow(touch1.clientY-touch2.clientY, 2));
}
window.onload=function (){
let oBox=document.getElementsByClassName('box')[0];
let dis1,dis2;
let scale=1.0,old_scale;
document.addEventListener('touchstart', function (ev){
if(ev.targetTouches.length>=2){
dis1=calcDistance(ev.targetTouches[0], ev.targetTouches[1]);
old_scale=scale;
}
}, false);
document.addEventListener('touchmove', function (ev){
if(ev.targetTouches.length>=2){
dis2=calcDistance(ev.targetTouches[0], ev.targetTouches[1]);
scale=old_scale*dis2/dis1;
oBox.style.transform=`scale(${scale})`;
}
}, false);
};
</script>
</head>
<body>
<div class="box">asdfasdf</div>
</body>
</html>