如何使用pixijs获取多边形的边缘？答案

【问题标题】：How to get edges of a polygon using pixijs?如何使用pixijs获取多边形的边缘？
【发布时间】：2020-06-06 03:56:53
【问题描述】：

我正在使用 pixi.js 创建一些可编辑的多边形。所以，我想要实现的是：

我有一个多边形

然后，当我碰到边缘时，应该会出现一个小圆圈

接下来我可以拖放边缘的那一部分，为多边形创建一个新点

目前，我所知道的是多边形顶点，我正在考虑使用线函数 (y=mx+b) 来检查鼠标所在的点是否属于边缘。我的问题是，我不知道如何获得这些边缘。有什么建议吗？当然，如果您有任何其他想法，请随时分享 =)。

【问题讨论】：

问题：这与角度有什么关系？ :)
对不起，我的错。它是固定的 =)

标签： pixi.js

【解决方案1】：

For now, what I know is the polygon vertices

您可能使用https://pixijs.download/dev/docs/PIXI.Graphics.html#drawPolygon 方法通过向其传递点列表来绘制多边形 - 类似于本示例中的最后一个形状：https://pixijs.io/examples/#/graphics/simple.js

// draw polygon
const path = [600, 370, 700, 460, 780, 420, 730, 570, 590, 520];

graphics.lineStyle(0);
graphics.beginFill(0x3500FA, 1);
graphics.drawPolygon(path);
graphics.endFill();

^ 在该示例中，我们有 5 个点：P (600, 370), Q (700, 460), R (780, 420), S (730, 570), T (590, 520)。

这也意味着我们有 5 条边：PQ、QR、RS、ST、TP

现在，我们应该有办法判断鼠标指针是否“悬停在某个边缘”。 “悬停”我的意思是：它与边缘有一段距离 - 可以说距离是 10 像素。所以我们想知道鼠标指针是否距离某个边缘 10 像素。

要知道我们可以使用Line defined by two points部分中解释的公式：https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line#Line_defined_by_two_points

P1=(x1,y1) 和 P2=(x2,y2) - 是某些边的开始和结束顶点（例如 PQ）
(x0,y0) 是我们的“鼠标点”

您可以遍历所有边缘并执行上述计算 - 如果某个边缘的距离小于 10 像素，那么您就有了答案。如果有多个边缘满足此要求，那么您应该选择一个距离最小的边缘（例如，如果将鼠标放在某个顶点附近，就会发生这种情况）。

现在您已经选择了边缘。现在让我们从你的问题做以下几点：

2. Then, when I hit the edge a small circle should appear

要计算这个圆的位置，我们可以使用来自同一维基百科页面的公式：https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line#Line_defined_by_an_equation - 部分The point on this line which is closest to (x0,y0) has coordinates:。

在这里，您需要将所选边的顶点坐标转换为线函数。

那么我们可以继续你问题的最后一点：

3. And next I can drag and drop that part of the edge to creating a new point for the polygon

您可以通过向多边形添加新顶点来实现。

假设选择的边是 PQ - 那么这个新的顶点应该被添加到顶点列表中的顶点 P 和 Q 之间，你传递给 drawPolygon 方法。让我们将这个新顶点命名为 X。顶点 X 的坐标应该等于当前鼠标坐标。

那么你将有以下边：PX、XQ、QR、RS、ST、TP。

您可能希望在单击鼠标和按下鼠标按钮等后激活此“模式” - 但这是与交互性/GUI 等相关的单独问题 - 而不是图形:)。

注意：将应用程序的演示部分（图形/pixi.js 相关的东西）与机制和交互性/GUI 等分开是很好的。例如：在不同的地方（其他类、方法等）进行计算你做你的实际绘图（调用 pixi.js 方法，更新画布等）。将计算结果存储在某个地方（根据上面的示例，它将是：顶点列表、圆的位置、颜色等），然后在绘制时获取这些结果并使用它们绘制多边形。不要把所有东西都混在一个地方；）

【讨论】：