Js 跟手转动的罗盘指针

或许跟手拖拽已经足够广泛，但是跟手沿着圆弧转动的罗盘指针，却依然足够挑战，先来看看咱们要实现的小目标，查看效果(请用手机打开，或者用chrome的手机模式打开)

任务分解、分析

1、 跟手拖拽的通常套路

1. touchstart 的时候记录初始位置：ox，oy
2. touchmove 的过程当中移动到新的位置：x = x1-ox, y = x1 - oy
3. touchend 的时候，这步好像也不须要干啥

2、圆弧转盘转动的通常作法

1. 设定圆心转动的原点
2. 动态的修改旋转的角度（或者弧度）

3、合二为一
如何将手势动做反应到圆弧的角度或者弧度变动上，这是问题的症结所在，起初我也为此而困顿不已

先是经过设定某一位移而旋转固定的角度，可是很难肯定圆弧的有效位移，就算肯定了有效位移，当旋转到一百八十度以后也蒙圈，反着动了~~
并且这种不均匀的运动实在也难以服众

纠结之际，我拿起了纸和笔，从新寻找灵感：

注意到图片红色的点是圆心，绿色的点是 touchstart 时候记录下的起始点，蓝色的点是 touchmove 的过程当中不断变化的目标点。咱们的目标很明确，计算指针变化的角度（或弧度），用我仅有的初中数学知识思考得知，知道三角形的每一个顶点，是能够求出每一个顶角的角度。运用三角形的余弦定理，求弧度值：

//得到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);
    }复制代码

刚才只考虑了顺时针的状况，不能忽略逆时针的方向：

这种状况的弧度值为 -getAngle(point1, point2, point3)，这并不难理解，难点在于如何判断究竟是逆时针仍是顺时针，能够经过以下的面积量的方法来判断顺时针仍是逆时针

//经过面积量的方法来判断顺时针仍是逆时针
    //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="" 0;="" }<="" code="">
  
  
  

 复制代码

完整的程序代码

go ~~

结语

Js 特效，有时候代码不须要不少，可是找到其中的规律再转化为机器认识的语言绝非易事，难就难在这个数学建模的过程，须要一点想象力，能够给予的经验就是，拿起你的笔和纸，去画，灵感自来

欢迎来到个人会客厅：