JS计算两个节点间的最短路径

已经有step1和step2两个节点,每个节点有4个可连接点,如何让step1或step2移动过程中,它们之间的路径始终最短,也就是如何让结点间的连线按照一定的规则动态变化,保证两个节点间的线段距离最短。

这里可以假设step2是圆心,step1到step2的距离为半径,step1绕step2做圆周运动,step1和可移动角度正好是360度,就可以根据角度变化来确定两个点之间的线段使用哪两个连接点来连接。

如上图,把360度等分成4部分,当step1旋转至各自区域时,线段就连接step1的可连接点。同理,用相同的方式,把step1看作是圆心,step1也可以根据角度得到最短路径的可连接点。

两个点旋转的角度可以根据三角函数来计算,其中step1的坐标是x1,y1,step2的坐标是x2,y2:

ini 复制代码
const radians = Math.atan2(y2 - y1, x2 - x1);
const deg = (radians * 180 / Math.PI + 360) % 360;

获取旋转的角度就可以开始获取可连接点:

lua 复制代码
if (deg > 315 || deg < 45) {
  // 设置可连接点
} else if (deg > 45 && deg < 135) {
  //
} else if (deg > 135 && deg < 225) {
  // 
} else if (deg > 225 && deg < 315) {
  // 
}

最终实现的效果:

预览地址

相关推荐
斯~内克几秒前
React Router 完全指南:从基础到高级实践
前端·react.js·前端框架
m0_748232392 分钟前
qwenvl 以及qwenvl 2 模型架构理解
android·前端·后端
冲!!5 分钟前
vue3中ref和reactive响应式数据、ref模板引用(组合式和选项式区别)、组件ref的使用
前端·javascript·vue.js
匹马夕阳6 分钟前
React vs Vue3深度对比与使用场景分析
前端·react.js·前端框架
七灵微36 分钟前
【前端】简单原生实例合集html,css,js
前端·css·html
祈澈菇凉36 分钟前
2025年React Hooks的进阶面试题130题及其答案解析..
前端·react.js·前端框架
Neo Evolution44 分钟前
每天一个Flutter开发小项目 (6) : 表单与验证的专业实践 - 构建预约应用
android·开发语言·前端·javascript·flutter
大橙子房1 小时前
AI学习第六天-python的基础使用-趣味图形
前端·python·学习
小金子J2 小时前
Vue 表单优化:下拉框值改变前的确认提示与还原逻辑实现
前端·javascript·vue.js·elementui
web150854159352 小时前
Nginx 配置前端后端服务
运维·前端·nginx