Js 跟手转动的罗盘指针

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

任务分解、分析

一、跟手拖拽的一般套路

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

二、圆弧转盘转动的一般做法

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

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

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

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

注意到图片红色的点是圆心，绿色的点是 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 {
            return 0;
        }
    }

完整的程序代码

go ~~

结语

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

欢迎来到我的会客厅：