检查绘制的线是否相交或在html canvas上的现有多边形内部

问题描述

检查所绘制的线是否相交或在html画布上的现有多边形内。

我有一个html画布，并且已经绘制了一个多边形（主要是四边形）。现在，如果在画布上绘制了一条直线，我必须检查它是否与多边形的任意边相交或是否在多边形内。如果其中任何一个为真（相交或内部），我都必须返回真。

我正在用Angular编写代码。

解决方法

我假设您是指线段而不是无限线。

您可以使用交点检测算法（arbitrary found example）检查线段是否与任何多边形边缘相交（全部选中）

如果结果为假，也请检查一个段末尾为point in polygon test

如果您希望“内部”情况更常见-请先“指向多边形”。

也许您的框架中已经存在类似的功能。

---

还请注意，有一些更简单的方法来对齐轴对齐的矩形（框）

,

获取细分市场支撑线的隐式方程式（因为您说“内部”是可能的，因此您的“线”必须是细分市场）。格式为

s(x,y) = a x + b y + c = 0

和S在该行的一侧为正，而在另一侧为负。

现在轮流在多边形的每一侧插入两个顶点的坐标。如果S在两个顶点之间改变符号，则该边与直线相交。

现在的诀窍是使用线从一个端点到另一端点的参数方程式，并根据沿线的参数t找到与线的交点。请注意，该分段将对应于t间隔[0,1]。

扫描完整个多边形后，您将看到一个t值列表。如果列表为空，则没有交集。如果列表中的所有值为<0或>1，则无交集。否则，将有一个交叉点（一个或多个子分段）。