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

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-04-17 09:27:38

    推荐一个老前端开发者的博客

    前端修炼场,首页标签大全greenSock前端研究VUE研究我们的作品flash技术探讨开发心得个人档案培训与招聘服务报价

  • 2020-04-17 09:41:47

    前端css博客推荐

    这个博客有大量的css内容,有svg,TweenMax等教程,抽空通读一下

  • 2020-04-17 10:20:47

    GreenSocks Animation Platform详细工作机制以及TweenMax用法

    GSAP(GreenSocks Animation Platform)是一个性能较好的前端动画库。最近在写一个前端SVG动画编辑器时选择了它作为底层的动画库。为了减少踩坑,我大致浏览了它的源代码,这篇文章主要是对我的理解进行记录。 我会先简单介绍一下这个动画库的API,再介绍它的插件机制,最后会从一个用例出发跟踪其运行机制。

  • 2020-04-17 10:39:02

    CSS 滤镜技巧与细节,实现火焰,融合等特效

    简单来说,CSS 滤镜就是提供类似 PS 的图形特效,像模糊,锐化或元素变色等功能。通常被用于调整图片,背景和边界的渲染。本文就会围绕这些滤镜展开,看看具体能怎么使用或者玩出什么花活。

  • 2020-04-17 10:42:29

    (三)TweenMax运动效果

    运动效果 实例化对象.set() 立刻运动到指定地点,不用加时间

  • 2020-04-17 11:19:55

    Vue中的is和操作DOM

    vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题,譬如ul里面要接上li的标签,引入is的属性后,你完全可以写成这样

  • 2020-04-17 11:27:48

    TweenMax中文初级教程一

    TweenMax.js集成了GreenSock动画平台的大部分核心功能,且具有极高的兼容性。

  • 2020-04-17 11:28:35

    TweenMax中文初级教程二

    TimelineMax是GreenSock 动画平台中的动画组织、排序、管理工具,可创建时间轴(timeline)作为动画或其他时间轴的容器,这使得整个动画控制和精确管理时间变得简单,避免了通过反复delay和回调进行动画。 作者:李霖弢 链接:https://www.jianshu.com/p/8c0361e43bf5 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 2020-04-17 11:28:57

    TweenMax中文初级教程三

    动画关键词:CSS(一般可以省略) CSSPlugin用于在TweenMax中对DOM元素的CSS相关属性进行动画 在CSSPlugin中CSS属性需要写成驼峰式,例如font-size应当写作fontSize。有时候你可以在一些默认px为单位的属性中省略单位,CSSPlugin还可以在不同的单位间做动画:

  • 2020-04-17 11:29:23

    TweenMax中文初级教程四

    用于滚动窗口(类似于window.scrollTo(x, y))或DOM元素(如myDiv.scrollTop = y; myDiv.scrollLeft = x;)。滚动窗口时使用window作为动画目标。