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

Question

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

我有一个多边形

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

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

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

Answer 1

For now, what I know is the polygon vertices

您可能使用 https://pixijs.download/dev/docs/PIXI.Graphics.html#drawPolygon method by passing to it a list of points - similar as last shape in this example: 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

现在，我们应该有一些方法来判断鼠标指针是否 "is hovered over some some edge"。 "is hovered" 我的意思是：它位于距边缘一定距离处 - 假设所述距离为 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)是我们的"mouse point"

您可以遍历所有边并执行上述计算 - 如果某些边的距离小于 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 - 那么这个新顶点应该添加到您传递给 drawPolygon 方法的顶点列表中的顶点 P 和 Q 之间。让我们将这个新顶点命名为 X。顶点 X 的坐标应等于当前鼠标坐标。

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

您可能想在单击鼠标后和按下鼠标按钮等时激活此 "mode" - 但这是与交互性/GUI 等相关的独立问题 - 而不是图形 :)。

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

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

How to get edges of a polygon using pixijs?

pixi.js