js求两圆交点_谈谈求线段交点的几种算法(js实现,完整版)
"求线段交点"是一种非常基础的几何计算, 在很多游戏中都会被使用到.
下面我就现学现卖的把最近才学会的一些"求线段交点"的算法总结一下, 希望对大家有所帮助.
本文讲的内容都很初级, 主要是面向和我一样的初学者, 所以请各位算法帝们轻拍啊 嘎嘎
引用
已知线段1(a,b) 和线段2(c,d) ,其中a b c d为端点, 求线段交点p .(平行或共线视作不相交)
===============================
算法一: 求两条线段所在直线的交点, 再判断交点是否在两条线段上.
求直线交点时 我们可通过直线的一般方程 ax+by+c=0 求得(方程中的abc为系数,不是前面提到的端点,另外也可用点斜式方程和斜截式方程,此处暂且不论).
然后根据交点的与线段端点的位置关系来判断交点是否在线段上. 公式如下图:
实现代码如下 :
Javascript代码
function segmentsIntr(a, b, c, d){
/** 1 解线性方程组, 求线段交点. **/
// 如果分母为0 则平行或共线, 不相交
var denominator = (b.y - a.y)*(d.x - c.x) - (a.x - b.x)*(c.y - d.y);
if (denominator==0) {
return false;
}
// 线段所在直线的交点坐标 (x , y)
var x = ( (b.x - a.x) * (d.x - c.x) * (c.y - a.y)
+ (b.y - a.y) * (d.x - c.x) * a.x
- (d.y - c.y) * (b.x - a.x) * c.x ) / denominator ;
var y = -( (b.y - a.y) * (d.y - c.y) * (c.x - a.x)
+ (b.x - a.x) * (d.y - c.y) * a.y
- (d.x - c.x) * (b.y - a.y) * c.y ) / denominator;
/** 2 判断交点是否在两条线段上 **/
if (
// 交点在线段1上
(x - a.x) * (x - b.x) <= 0 && (y - a.y) * (y - b.y) <= 0
// 且交点也在线段2上
&& (x - c.x) * (x - d.x) <= 0 && (y - c.y) * (y - d.y) <= 0
){
// 返回交点p
return {
x : x,
y : y
}
}
//否则不相交
return false
}
算法一思路比较清晰易懂, 但是性能并不高. 因为它在不确定交点是否有效(在线段上)之前, 就先去计算了交点, 耗费了较多的时间.
如果最后发现交点无效, 那么之前的计算就白折腾了. 而且整个计算的过程也很复杂.
那么有没有一种思路,可以让我们先判断是否存在有效交点,然后再去计算它呢?
显然答案是肯定的. 于是就有了后面的一些算法.
===============================
算法二: 判断每一条线段的两个端点是否都在另一条线段的两侧, 是则求出两条线段所在直线的交点, 否则不相交.
第一步判断两个点是否在某条线段的两侧, 通常可采用投影法:
求出线段的法线向量, 然后把点投影到法线上, 最后根据投影的位置来判断点和线段的关系. 见下图
点a和点b在线段cd法线上的投影如图所示, 这时候我们还要做一次线段cd在自己法线上的投影(选择点c或点d中的一个即可).
主要用来做参考.
图中点a投影和点b投影在点c投影的两侧, 说明线段ab的端点在线段cd的两侧.
同理, 再判断一次cd是否在线段ab两侧即可.
求法线 , 求投影 什么的听起来很复杂的样子, 实际上对于我来说也确实挺复杂,在几个月前我也不会(念书那会儿的几何知识都忘光了 :'( )'
不过好在学习和实现起来还不算复杂, 皆有公式可循:
求线段ab的法线:
Javascript代码
var nx=b.y - a.y,
ny=a.x - b.x;
var normalLine = { x: nx, y: ny };
注意: 其中 normalLine.x和normalLine.y的几何意义表示法线的方向, 而不是坐标.
求点c在法线上的投影位置:
Javascript代码
var dist= normalLine.x*c.x + normalLine.y*c.y;
注意: 这里的"投影位置"是一个标量, 表示的是到法线原点的距离, 而不是投影点的坐标.
通常知道这个距离就足够了.
当我们把图中 点a投影(distA),点b投影(distB),点c投影(distC) 都求出来之后, 就可以很容易的根据各自的大小判断出相对位置.
distA==distB==distC 时, 两条线段共线
distA==distB!=distC 时, 两条线段平行
distA 和 distB 在distC 同侧时, 两条线段不相交.
distA 和 distB 在distC 异侧时, 两条线段是否相交需要再判断点c点d与线段ab的关系.
前面的那些步骤, 只是实现了"判断线段是否相交", 当结果为true时, 我们还需要进一步求交点.
求交点的过程后面再说, 先看一下该算法的完整实现 :
Javascript代码
function segmentsIntr(a, b, c, d){
//线段ab的法线N1
var nx1 = (b.y - a.y), ny1 = (a.x - b.x);
//线段cd的法线N2
var nx2 = (d.y - c.y), ny2 = (c.x - d.x);
//两条法线做叉乘, 如果结果为0, 说明线段ab和线段cd平行或共线,不相交
var denominator = nx1*ny2 - ny1*nx2;
if (denominator==0) {
return false;
}
//在法线N2上的投影
var distC_N2=nx2 * c.x + ny2 * c.y;
var distA_N2=nx2 * a.x + ny2 * a.y-distC_N2;
var distB_N2=nx2 * b.x + ny2 * b.y-distC_N2;
// 点a投影和点b投影在点c投影同侧 (对点在线段上的情况,本例当作不相交处理);
if ( distA_N2*distB_N2>=0 ) {
return false;
}
//
//判断点c点d 和线段ab的关系, 原理同上
//
//在法线N1上的投影
var distA_N1=nx1 * a.x + ny1 * a.y;
var distC_N1=nx1 * c.x + ny1 * c.y-distA_N1;
var distD_N1=nx1 * d.x + ny1 * d.y-distA_N1;
if ( distC_N1*distD_N1>=0 ) {
return false;
}
//计算交点坐标
var fraction= distA_N2 / denominator;
var dx= fraction * ny1,
dy= -fraction * nx1;
return { x: a.x + dx , y: a.y + dy };
}
最后 求交点坐标的部分 所用的方法看起来有点奇怪, 有种摸不着头脑的感觉.
其实它和算法一 里面的算法是类似的,只是里面的很多计算项已经被提前计算好了.
换句话说, 算法二里求交点坐标的部分 其实也是用的直线的线性方程组来做的.
现在来简单粗略 很不科学的对比一下算法一和算法二:
1 最好情况下, 两种算法的复杂度相同
2 最坏情况, 算法一和算法二的计算量差不多
3 但是算法二提供了 更多的"提前结束条件",所以平均情况下,应该算法二更优.
实际测试下来, 实际情况也确实如此.
前面的两种算法基本上是比较常见的可以应付绝大多数情况. 但是事实上还有一种更好的算法.
这也是我最近才新学会的(我现学现卖了,大家不要介意啊...)
===============================
算法三: 判断每一条线段的两个端点是否都在另一条线段的两侧, 是则求出两条线段所在直线的交点, 否则不相交.
(咦? 怎么感觉和算法二一样啊? 不要怀疑 确实一样 ... 囧)
所谓算法三, 其实只是对算法二的一个改良, 改良的地方主要就是 :
不通过法线投影来判断点和线段的位置关系, 而是通过点和线段构成的三角形面积来判断.
先来复习下三角形面积公式: 已知三角形三点a(x,y) b(x,y) c(x,y), 三角形面积为:
Javascript代码
var triArea=( (a.x - c.x) * (b.y - c.y) - (a.y - c.y) * (b.x - c.x) ) /2 ;
因为 两向量叉乘==两向量构成的平行四边形(以两向量为邻边)的面积 , 所以上面的公式也不难理解.
而且由于向量是有方向的, 所以面积也是有方向的, 通常我们以逆时针为正, 顺时针为负数.
改良算法关键点就是:
如果"线段ab和点c构成的三角形面积"与"线段ab和点d构成的三角形面积" 构成的三角形面积的正负符号相异,
那么点c和点d位于线段ab两侧. 如下图所示:
图中虚线所示的三角形, 缠绕方向(三边的定义顺序)不同, 所以面积的正负符号不同.
下面还是先看代码:
由于我们只要判断符号即可, 所以前面的三角形面积公式我们就不需要后面的 除以2 了.
Javascript代码
function segmentsIntr(a, b, c, d){
// 三角形abc 面积的2倍
var area_abc = (a.x - c.x) * (b.y - c.y) - (a.y - c.y) * (b.x - c.x);
// 三角形abd 面积的2倍
var area_abd = (a.x - d.x) * (b.y - d.y) - (a.y - d.y) * (b.x - d.x);
// 面积符号相同则两点在线段同侧,不相交 (对点在线段上的情况,本例当作不相交处理);
if ( area_abc*area_abd>=0 ) {
return false;
}
// 三角形cda 面积的2倍
var area_cda = (c.x - a.x) * (d.y - a.y) - (c.y - a.y) * (d.x - a.x);
// 三角形cdb 面积的2倍
// 注意: 这里有一个小优化.不需要再用公式计算面积,而是通过已知的三个面积加减得出.
var area_cdb = area_cda + area_abc - area_abd ;
if ( area_cda * area_cdb >= 0 ) {
return false;
}
//计算交点坐标
var t = area_cda / ( area_abd- area_abc );
var dx= t*(b.x - a.x),
dy= t*(b.y - a.y);
return { x: a.x + dx , y: a.y + dy };
}
最后 计算交点坐标的部分 和算法二同理.
算法三在算法二的基础上, 大大简化了计算步骤, 代码也更精简. 可以说,是三种算法里, 最好的.实际测试结果也是如此.
当然必须坦诚的来说, 在Javascript里, 对于普通的计算, 三种算法的时间复杂度其实是差不多的(尤其是V8引擎下).
我的测试用例里也是进行变态的百万次级别的线段相交测试 才能拉开三种算法之间的差距.
不过本着精益求精 以及学习的态度而言, 追求一个更好的算法, 总是有其积极意义的.
好了 不啰嗦了, 就到这里吧.
现学现卖的东西, 难免有错误, 还请大家不吝斧正. 先谢谢啦
补充:
后来微博上@miloyip (这个是真正的大牛, 是会自己写3D引擎的人哦 )还推荐了另外一种更好的算法, 不过我还没有理解透彻.
等我学会了 再来和大家分享
js求两圆交点_谈谈求线段交点的几种算法(js实现,完整版)相关推荐
- matlab求两向量夹角_【求精干货】高中数学知识点总结归纳高一学生必须掌握
高中数学高考知识点总结高一必高中数学高一的学生离高考还有两年的时间,别看这两年感觉很长,其实时间一晃就过了,高中数学学习成绩不太好的同学该加油好好学习了.别等到最后一年累死累活的搞,还不一定有效果,今 ...
- java 直线交点_[Java教程]谈谈求线段交点的几种算法(js实现,完整版)
[Java教程]谈谈求线段交点的几种算法(js实现,完整版) 0 2014-08-27 10:05:22 "求线段交点"是一种非常基础的几何计算, 在很多游戏中都会被使用到. 下面 ...
- 已知两圆圆心坐标及半径求两圆交点 (C语言|参数方程求解)
已知两圆圆心坐标及半径求两圆交点 (C语言|参数方程求解) 在一个二维平面上给定两个圆的圆心横纵坐标.半径共6个参数, 求交点. 这个问题无非是解二元二次方程组.普通二元二次方程联立消元求解的困难在于 ...
- 求两圆相交的交点的方法
最近研究三角定位算法,研究了下怎样求两圆的交点,现给出求解方法:
- 求一个数的二进制中有多少了 1 的三种算法 ——Java篇
求一个数的二进制中有多少了 1 的三种算法 --Java篇 文章目录 求一个数的二进制中有多少了 1 的三种算法 --Java篇 算法一:通过取模 % 运算就取出每一比特位数值,再判断 思路: 代码: ...
- js求两圆交点_详解js实现线段交点的三种算法
本文讲的内容都很初级, 主要是面向和我一样的初学者, 所以请各位算法帝们轻拍啊 引用 已知线段1(a,b) 和线段2(c,d) ,其中a b c d为端点, 求线段交点p .(平行或共线视作不相交) ...
- js求两圆交点_利用二项式通项公式求系数及综合运用(2)
更多资料获取,添加qq群:639636957 更多精彩,请点击上方蓝字关注我们! 二项式通项公式的基本应用 1 题目 2 视频讲解 3 答案 4 知识点 往期视频汇总 每日一题第1题之数列对数型不等式 ...
- 两个圆公切线求法_求两圆的公切线计算
关于两圆的公切线计算我们首先需要搞清楚的是两个圆之间有哪些位置关系,两个圆的位置包括内含.内切.外切.外离几种方式,可以看出位置关系可以根据"两圆心之间的距离"与"两圆半 ...
- matlab求两向量夹角_高考数学解题技巧:专题21 平面向量中最值、范围问题高中数学黄金解题模板...
↑ 点击上方"红色笔记"关注我们 高中各科解题技巧下载 回复数字:800009 高考数学解题技巧:专题24 数列求和方法高中数学黄金解题模板 高考数学解题技巧:专题26 含参不等 ...
最新文章
- [基础知识]Linux新手系列之三
- Unmarshaller解析xml文件
- 多边形上点的顺序排序_一种寻找多边形视觉中心的新算法
- inner join on 加条件和where加条件_SQL学习笔记 - GROUP BY / JOIN / UNION
- 【网络流24题】【LOJ6224】深海机器人问题(最大费用最大流)
- 知识图谱中的关系推理
- 类火墙的iptables
- Atitit enhance sprbt start speed cyidon swdu 启动速度 目录 第一节 简化与提升启动速度性能	1 第二节 	1 第二章 更加轻量级的rest spar
- TextView跑马灯和editText抢占焦点,键盘弹不出来问题解决
- 顶尖电子秤ls6恢复出厂_顶尖电子秤常见故障处理方法new
- qdir 自动创建多级目录_QDir 类 - 目录信息类
- ACM中国国家集训队论文集目录(1999-2009)
- 笔记本电脑共享WiFi
- 怎么用计算机解锁,一加6T解锁BL教程,利用电脑进行一键解锁Bootloader操作
- 2022-2028年中国半导体专用设备行业市场深度分析及投资前景趋势报告
- 计算机动画算法与编程基础pdf,清华大学 计算机动画算法与编程基础2-图形绘制课件.ppt...
- VC2015 qt 打包发布
- 关闭research_Microsoft Research的新数码照片技术已集成到Microsoft Digital Image Suite 9中...
- 在线提取视频中的字幕(亲测有效)
- plink源码_plink源码_plink参数说明
热门文章
- 服务器型号hstns,HSTNS-PL14 PS-2461-1C-LF ML310G8热插拔电源模块 HP服务器电源
- 数字图像处理-编程实现染色体计数 C语言实现
- c++中extern用法-个人理解
- kali操作系统--namp扫描,破解密码,抓包
- php smarty 视频教程,传智播客PHP2015-smarty视频教程
- C#EventHandler用法
- LeetCode:硬币组合的最少个数
- 懂java转python容易吗_Java转行学Python难不难?老男孩IT教育
- Python--爬虫--XPath入门
- 没有工作经验,你该学什么?