<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>求三角形第三点坐标</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<style>
.con{position: relative;width:500px;height:500px; margin:300px auto;border: #ddd 1px solid;}
.box{position: absolute;width: 6px;height: 6px;background: blue;left: 0;top: 0;}
.box2{background: red;}
</style>
</head>
<body>
<div class="con"></div>
<script>
//根据两点坐标和边长长度，计算第三点坐标，第三点有两个
function Cal3rdPoint(vecSrcPoints, bc, ca) {
var vec3rdPoints=[];
if (vecSrcPoints.length < 2) {
return false;
}
var pointA = vecSrcPoints[0];
var pointB = vecSrcPoints[1];
//用两点坐标计算ab边的长度
var ab = getDistance(pointA, pointB);
var pointC1={x:0,y:0};
var pointC2={x:0,y:0};
dy = pointB.y - pointA.y;
dx = pointB.x - pointA.x;
tmpValue = (ca * ca + ab * ab - bc * bc) / (2 * ca * ab);
//AB的方位角
// var angAB = getAngle(pointA, pointB);//原始坐标系(x轴左侧逆时针为正向角度)
var angAB = -getAngle(pointA, pointB) + 180;//转为屏幕坐标系角度(x轴右侧顺时针为正向角度)
console.log('对应角度',angAB,getAngle(pointA, pointB));
angAB = angAB * (Math.PI / 180);
// angAB = atan(dy / dx);
//A点对应BC边的角度
angBC = Math.acos(tmpValue);
//AC的方位角
angAC = angAB - angBC;
pointC1.x = pointA.x + ca * Math.sin(angAC);
pointC1.y = pointA.y + ca * Math.cos(angAC);
vec3rdPoints.push(pointC1);
angAC = angAB + angBC;
pointC2.x = pointA.x + ca * Math.sin(angAC);
pointC2.y = pointA.y + ca * Math.cos(angAC);
vec3rdPoints.push(pointC2);
return vec3rdPoints;
}
//获得物体中心和鼠标坐标连线，与y轴正半轴之间的夹角
function getAngle(target1, target2) {
var x = Math.abs(target1.x - target2.x);
var y = Math.abs(target1.y - target2.y);
var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
var cos = y / z;
var radina = Math.acos(cos);//用反三角函数求弧度
var angle = Math.floor(180 / (Math.PI / radina));//将弧度转换成角度
if (target2.x > target1.x && target2.y > target1.y) {//鼠标在第四象限
angle = 180 - angle;
}
if (target2.x == target1.x && target2.y > target1.y) {//鼠标在y轴负方向上
angle = 180;
}
if (target2.x > target1.x && target2.y == target1.y) {//鼠标在x轴正方向上
angle = 90;
}
if (target2.x < target1.x && target2.y > target1.y) {//鼠标在第三象限
angle = 180 + angle;
}
if (target2.x < target1.x && target2.y == target1.y) {//鼠标在x轴负方向
angle = 270;
}
if (target2.x < target1.x && target2.y < target1.y) {//鼠标在第二象限
angle = 360 - angle;
}
return angle;
}
// 两点间距离
function getDistance(target1, target2) {
var xdiff = Math.abs(target2.x - target1.x);
var ydiff = Math.abs(target2.y - target1.y);
return Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
}
//输出
console.log(Cal3rdPoint([{x:0,y:0},{x:-50,y:-50}], 80, 80));
//html呈现
var zuobiao=[{x:0,y:0},{x:120,y:120}]
$('.con').append(`<div class="box" style="left:${zuobiao[0].x}px;top:${zuobiao[0].y}px;"></div>`)
$('.con').append(`<div class="box" style="left:${zuobiao[1].x}px;top:${zuobiao[1].y}px;"></div>`)
var newCal3rd = Cal3rdPoint(zuobiao, 100, 100);
$('.con').append(`<div class="box box2" style="left:${newCal3rd[0].x}px;top:${newCal3rd[0].y}px;"></div>`)
$('.con').append(`<div class="box box2" style="left:${newCal3rd[1].x}px;top:${newCal3rd[1].y}px;"></div>`)
</script>
</body>
</html>欢迎光顾我的小站！
Comments | NOTHING