已知两点获取直线公式:
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
<!-- 底盘 -->
<div id="disk">
<div id="img"></div>
<div id="pointer">
<div></div>
</div>
<div class="outer"></div>
<div class="pie"></div>
</div>
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();