如何判断一个多边形是否合法

2019-11-29 13:06:27

参考地址 如何判断一个多边形是否合法  

背景及问题分析

利用无人机对一片区域进行测绘前,我们会先在地图上框选一个区域,然后再规划飞行的路线,而需要测绘的这片区域往往是一个多边形。在 MeshKit 中,我们加入了多边形区域的编辑功能,其中就涉及判断用户所编辑出来的多边形是否合法的问题。

首先我们要确定一个标准:怎么样才算一个不合法的多边形 ?我们可以简单地通过下面这幅图来解释一下:


我们可以看出前面两个分别是凹多边形和凸多边形,而最后一张则是我们所说的不合法多边形,可以看出这个不合法的多边形的特征就是:它存在某条边与另外一条边相交的情况

那么要判断一个多边形是否合法,我们只要判断组成多边形的所有线段是否存在相交的情况即可,当然,我们这里所说的相交是 规范相交 ,即 交点不在线段的端点上

好了,那么现在的问题可以简化成:如何判断两条线段是否规范相交

算法解析

这里我们需要借助 向量的叉积 来进行判断。

叉积,又称向量积,是对三维空间中的两个向量的二元运算。

这里推荐 3Blue1Brown 的 视频 来快速回顾一下叉积的概念(下面的两幅截图来自此视频)。我们只需知道叉积的结果是有正负的,比如我们以向量  \vec{v} 为标准,如下图,向量  \vec{w}  在  \vec{v}顺时针方向,那么 \vec{v} \times \vec{w} < 0

如果向量 \vec{w}  在  \vec{v}逆时针方向,那么 \vec{v} \times \vec{w} > 0

那么我们如何利用叉积的特性运用到判断线段是否相交上呢?

我们先看下面最直接的一个线段相交的情况:


线段 P_1P_2 和 线段 Q_1Q_2 明显存在一个交点,从上面这张图我们可以做一个简单的结论:如果一条的线段的两个端点在另外一条线段两侧,那么这两条线段可能相交,注意这里说的是可能相交,稍后会讲到另外一种情况。

我们可以将上面的图转换为向量的情况来看:


是不是觉得似曾相识,这跟上面提到的叉积的情况是不是很类似?
向量  \vec{P_1Q_1}\vec{P_1P_2}
向量  \vec{P_1Q_2}\vec{P_1P_2} 的顺时针方向,那么:\vec{P_1P_2} \times \vec{P_1Q_2} < 0

用 A 表示 \vec{P_1P_2} \times \vec{P_1Q_1} 的叉积结果,用 B 表示 \vec{P_1P_2} \times \vec{P_1Q_2} 的叉积结果,那么 一条的线段的两个端点在另外一条线段两侧 这个几何现象可以用这个公式表示 :A{\times}B<0

我们前面提到 如果一条的线段的两个端点在另外一条线段两侧,那么这两条线段可能相交 ,为什么是可能相交呢?如果我们将 线段 Q_1Q_2 往右边移动一下,会存在下面这种情况:


从上图可以看出,线段  的两个端点在线段  两侧,但是它们并没有相交。


那么如何排除这种情况呢?其实很简单,我们之前都是以线段 P_1P_2 作为主视角,如果将主视角换成线段 Q_1Q_2,那么我们很容易看出 线段 P_1P_2 的两个端点并没有在 线段 Q_1Q_2 的两侧。所以我们再次看回上面相交的那幅图,为了能够充分的判断两条线段相交,这次以 Q_1Q_2 为主视角看待这个问题,求叉积:


向量   在  的逆时针方向,那么:
向量   在  的顺时针方向,那么:


综上,我们可以得出:
A = \vec{P_1P_2} \times \vec{P_1Q_1}
B = \vec{P_1P_2} \times \vec{P_1Q_2}
C = \vec{Q_1Q_2} \times \vec{Q_1P_1}
D = \vec{Q_1Q_2} \times \vec{Q_1P_2}
A{\times} B < 0 && C \times D < 0 的时候,两条线段规范相交。
至于向量的叉积如何运算,这里就不细写了,给出一张计算草稿给大家过目一下:


示例代码

根据计算草稿的内容,我们就很容易通过代码来实现了:

private func isIntersect(line1: (CGPoint, CGPoint), line2: (CGPoint, CGPoint)) -> Bool {
    let p1 = line1.0
    let p2 = line1.1
    let q1 = line2.0
    let q2 = line2.1

    let a1 = (p2.x - p1.x) * (q1.y - p1.y) - (q1.x - p1.x) * (p2.y - p1.y)
    let a2 = (p2.x - p1.x) * (q2.y - p1.y) - (q2.x - p1.x) * (p2.y - p1.y)
    
    let b1 = (q2.x - q1.x) * (p1.y - q1.y) - (p1.x - q1.x) * (q2.y - q1.y)
    let b2 = (q2.x - q1.x) * (p2.y - q1.y) - (p2.x - q1.x) * (q2.y - q1.y)
    
    if a1 * a2 < 0 && b1 * b2 < 0 {
        return true
    }
    return false}




  • 2020-03-18 21:15:34

    使用canvas画布解决百度地图自定义图层全球连续显示问题

        基于百度地图的Web API进行自定义图层叠加时,默认的图层只能叠加到全球范围以内,即经度范围为[-180, 180],而无法将图层叠加到默认的全球范围以外,即经度范围超出了[-180, 180]之后,经纬度坐标会自动回归到(0, 0),而导致在地图拖拽时全球以外无法连续显示想要的图层,此时可以基于百度地图的自定义图层将经纬度坐标转为像素点使用画布canvas来解决该问题。解决后效果如下图所示: ———————————————— 版权声明:本文为CSDN博主「宏伟杰作」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/u011284073/article/details/80549950

  • 2020-03-18 21:18:01

    node-canvas实现百度地图个性化底图绘制

    随着nodejs的推出,node的并发和异步的强大能力,越来越多的得到应用,而且取得了非常不错的效果。 作为一个前端工程师对node.js自然有着一份更深的感情,跃跃欲试的心情,总希望能将它应用到产品中来。

  • 2020-03-18 21:19:28

    高德地图和canvas画图结合应用的一些感想(一)

    入了团队才发现,该项目前后端分离,后端工程师已就位主要实现接口,IOS端工程师也已就位,还差一个web前端工程师。背脊一凉,我之前虽然写过一些js和css,虽有点功底但是离前端工程师还是有距离的啊。在和朋友说明情况后,朋友也是胆大,让我试试,主要他实在找不到人了(也有可能目前前端工程师报价都太贵了,创业嘛,能节约就节约,能理解。。。),没办法,走一步算一步吧。

  • 2020-03-18 21:30:57

    基于OpenLayers实现地理围栏 谷歌百度高德地图都可以

    前言.因为项目有点特殊,需要接入谷歌地图实现地理围栏,因为谷歌地图的地理围栏接口相关接口并不完善,于是就换了一个思路,利用OpenLayers来实现地理围栏 openlayers 中文地址 http://weilin.me/ol3-primer/ch02/index.html 作者:zcty0701 链接:https://www.jianshu.com/p/60e88ee1e843 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 2020-03-19 17:12:40

    百度地图放大覆盖物消失

    产生问题的原因是因为我们用的普通的点数组生成的多边形,我们应该用百度的点数组生成就没问题了。

  • 2020-03-19 19:15:47

    vue中methods watch和compute的区别和联系

    首先要说,methods,watch和computed都是以函数为基础的,但各自却都不同 而从作用机制和性质上看,methods和watch/computed不太一样,所以我接下来的介绍主要有两个对比: 1.methods和(watch/computed)的对比