公式

已知两点获取直线公式：

Math.sqrt( Math.pow((x1 - x2),2) + Math.pow((y1 - y2),2) )

已知三点求角度

var cos= (Math.pow(一边,2)+Math.pow(二边,2) - Math.pow(三边,2) ) / (2*一边*二边)//得余弦
var deg = Math.acos( deg )*180/Math.PI;//得角度
deg = Math.round(deg)//取整角度 四舍五入

栗子

360°旋转仪盘表

html

css

/*转盘*/
#disk{
    /*display: none;*/
    position: relative;
    width: 88px;
    height: 88px;
    margin-left: 200px;
    margin-top: 200px;
    border-radius: 50%;
}
#disk:after{
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #111;
    top: 50%;
    left: 50%;
    margin: -1px 0 0 -1px;
}
#img{
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #ff9eff;
    z-index: 999;       
}
#pointer{
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 77px solid red;
    top: -33px;
    left: 50%;
    margin-left: -10px;
    z-index: 8;
    transform-origin: center bottom;
    transform: rotate(0deg);                
}
#pointer div{
    position: absolute;
    width: 2px;
    height: 2px;
    background: blue;
    border-radius: 50%;
    z-index: 99;
    top: 0;
    margin-top: -1px;
    left: 0;
    margin-left: -1px;
}
.outer{
    position: absolute;
    width: 154px;
    height: 154px;
    top: 50%;
    left: 50%;
    margin-top: -77px;
    margin-left: -77px;
    transform: rotate(0deg);
    clip: rect(0px,77px,154px,0px);/* 这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，使用clip属性，元素必须是absolute的 */
    border-radius: 77px;
    background: rgba(0,0,0,.2);
    z-index: 1
}
.pie{
    position: absolute;
    width: 156px;
    height: 156px;
    top: 50%;
    left: 50%;              
    margin-top: -78px;
    margin-left: -78px;             
    transform: rotate(0deg);
    clip: rect(0px,78px,156px,0px);
    border-radius: 78px;
    background: #fff;
    z-index: 1
}

js

 // 控制 拖拽
    var deg;
    var obj = $('#pointer');
    function drag() {
        obj.bind('mousedown', start);  
        function start(e) { 
            $(document).bind({
                'mousemove': move,
                'mouseup': stop
            });
            return false;
        }
        function move(e) {
            // 获取圆心
            var circleL = $('#disk').offset().left + 44;
            var circleT = $('#disk').offset().top + 44;
            // 获取起始点
            var startL = circleL;
            var startT = circleT - 88;
            // 第一条边
            var first = 88;
            //第二条边 
            var tow = 88;
            // 这是指针顶尖的中心点
            var ol = obj.find('div').offset().left + 1;
            var ot = obj.find('div').offset().top + 1;
            // console.log( ol,ot )
            var X = e.pageX;
            var Y = e.pageY;
            // console.log( X ,circleL+'--------' )
            //第二条边 
            var tow = Math.sqrt(Math.pow((X - circleL), 2) + Math.pow((Y - circleT), 2))

            // 求第三边
            var Third = Math.sqrt(Math.pow((X - startL), 2) + Math.pow((Y - startT), 2))

            // 求arccos 
            deg = (Math.pow(first, 2) + Math.pow(tow, 2) - Math.pow(Third, 2)) / (2 * first * tow)
            // 求角度
            deg = Math.acos(deg) * 180 / Math.PI;
            deg = Math.round(deg);
            // 判断顺时针还是逆时针
            if (startL > X && startT < Y) {
                deg = -deg;
                $('.pie').css({
                    'transform': 'rotate(' + deg + 'deg)'
                })
                $('.outer').css({
                    'transform': 'rotate(0deg)'
                })

            } else {
                $('.outer').css({
                    'transform': 'rotate(' + deg + 'deg)'
                })
                $('.pie').css({
                    'transform': 'rotate(0deg)'
                })
            }
            // 转角度

            obj.css('transform', 'rotate(' + deg + 'deg)');

            console.log(deg)
            return false;
        }
        function stop() {
            $(document).unbind({
                'mousemove': move,
                'mouseup': stop
            });
            obj.css('transform', 'rotate(0deg)');
            $('.pie').css({
                'transform': 'rotate(0deg)'
            })
            $('.outer').css({
                'transform': 'rotate(0deg)'
            })
        }
    }
    drag();