# js跟手转动的罗盘指针

## 分析

wheel.png

``````    //获得point2顶角的弧度值
//point1传入起始点，point2传入圆心，point3传入结束点，可求得指针运动的夹角弧度
function getAngle(point1, point2, point3) {
var bb = (point2.y - point1.y)*(point2.y - point1.y) + (point2.x - point1.x)*(point2.x - point1.x);
var aa = (point3.y - point1.y)*(point3.y - point1.y) + (point3.x - point1.x)*(point3.x - point1.x);
var cc = (point3.y - point2.y)*(point3.y - point2.y) + (point3.x - point2.x)*(point3.x - point2.x);
var cosa = (bb + cc - aa)/(2*Math.sqrt(bb)*Math.sqrt(cc));
return Math.acos(cosa);
}
``````

wheel2.png

``````
//通过面积量的方法来判断顺时针还是逆时针
//point1传入圆心，point2传入起始点，point3传入终点
function duration(point1, point2, point3) {
var sp = (point1.x-point3.x)*(point2.y-point3.y)-(point1.y-point3.y)*(point2.x-point3.x);
console.log(sp);
if(sp>0) {//顺时针
return 1
} else if(sp<0) {//逆时针
return -1
} else {
return 0;
}
}
``````

### 完整的程序代码

``````    <!DOCTYPE html>
<html>

<meta charset="utf-8">
<title>跟手转动罗盘指针</title>
<meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=1.0,user-scalable=0">
<style type="text/css">
+ {
margin: 0;
}

html,
body,
.container {
width: 100%;
height: 100%;
background-color: rgb(5, 15, 77);
position: relative;
}

.circle {
width: 320px;
height: 262px;
position: absolute;
top: 50%;
margin-top: -131px;
background-image: url(img/circle.png);
background-size: 100% 100%;
}

.line {
width: 72px;
height: 138px;
background-image: url(img/line.png);
background-size: 100% 100%;
top: 0;
left: 123px;
position: absolute;
transform: rotate(0deg);
transform-origin: 36px 138px;
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 36px 138px;
}
</style>

<body>
<script type="text/javascript">
var clientWidth = document.documentElement.clientWidth,
viewport = null,
viewportWidth = 'device-width',
viewportScale = 1;
if (clientWidth > 320) {
viewport = document.querySelector('meta[name="viewport"]');
viewportScale = clientWidth / 320;
viewportWidth = 320;
viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', maximum-scale=' + viewportScale + ', user-scalable=0');
}
</script>
<div class="container">
<div class="circle">
<div class="line" id='line'></div>
</div>
</div>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript">
//获得point2顶角的弧度值
function getAngle(point1, point2, point3) {
var bb = (point2.y - point1.y) * (point2.y - point1.y) + (point2.x - point1.x) * (point2.x - point1.x);
var aa = (point3.y - point1.y) * (point3.y - point1.y) + (point3.x - point1.x) * (point3.x - point1.x);
var cc = (point3.y - point2.y) * (point3.y - point2.y) + (point3.x - point2.x) * (point3.x - point2.x);
var cosa = (bb + cc - aa) / (2 * Math.sqrt(bb) * Math.sqrt(cc));
return Math.acos(cosa);
}

//通过面积量的方法来判断顺时针还是逆时针
//point1传入圆心，point2传入起始点，point3传入终点
function duration(point1, point2, point3) {
var sp = (point1.x-point3.x)*(point2.y-point3.y)-(point1.y-point3.y)*(point2.x-point3.x);
console.log(sp);
if(sp>0) {
return 1
} else if(sp<0) {
return -1
} else {
return 0;
}
}

var line = document.getElementById('line');
var oX = 0;
var oY = 0;
//全局记录
var rolate = 0;
//圆心
var pointCenter = {
x: 159,
y: 187
}
//初始移动点
var pointO = false;
var ro = 0;

//在手机浏览器（如微信）中打开页面拖动的时候页面会漏底
//禁掉默认事件，不然影响咱们的更手转动
\$(document).on('touchstart', function(e) {
e.preventDefault();
}).on('touchmove', function(e) {
e.preventDefault();
});

var touche = e.touches[0];
oX = touche.clientX;
oY = touche.clientY;
pointO = {
x: oX,
y: oY
}
});

var mx = e.touches[0].clientX;
var my = e.touches[0].clientY;

ro = getAngle(pointO, pointCenter, {
x: mx,
y: my
});

ro = ro * duration(pointCenter, pointO, {
x: mx,
y: my
});

ro = rolate + ro;
\$('#line').css({
'-webkit-transform': 'rotate(' + ro + 'rad)',
'transform': 'rotate(' + ro + 'rad)'
});
});

rolate = ro;
});
</script>
</body>

</html>

``````