绘制边缘方向的算法

Question

我正在开发图形应用程序。在应用程序窗口中，有由边连接的顶点。用户可以移动顶点，当他这样做时，边也会移动。我正在遇到一个问题，即找到绘制箭头以表示边方向的模式，取决于两个顶点的位置。

以下是一个示例。

假设顶点具有width/height = 20px; 边是从Vertex1的中心绘制到Vertex2的中心。

Vertex1.position = new Point(0,0);
Vertex2.position = new Point(100,0);
Edge.point1 = new Point(10,10);
Edge.point2 = new Point(110,10);
//Arrow representing direction from Vertex1 to Vertex2
Arrow.point1 = new Point(100,10);
Arrow.point2 = new Point(90,20);
Arrow.point3 = new Point(90,0);

问题是：已知边缘起始/结束点的位置，如何计算箭头点？

- Zaphood

---

1. 相对于点（顶部），用径向术语（角度/距离）定义箭头点，2) 计算连接您的顶点的向量的角度（与x或y轴的角度无关），3) 根据您选择的角度，从中加或减去箭头点角度，4) 使用正弦和余弦，计算每个箭头（左右）点相对于顶部箭头点的x和y偏移量，5) 将这些值添加到顶部箭头点。

- neeKo

Answer 1

假设边的起点坐标为 (ax, ay)，终点坐标为 (bx, by)，顶点半径为 w，箭头指针长度为 l，箭头边缘之间的夹角为 alpha 然后是伪代码：

ex := (bx - ax) 
ey := (by - ay) 
ex := ex / sqrt(ex^2 + ey^2)
ey := ey / sqrt(ex^2 + ey^2)

箭头的第一点：

a1x := bx - w * ex
a1y := by - w * ey

箭头的第二个要点：

a2x := bx - (w + l) * ex + l * tg(alpha/2) * ey
a2y := by - (w + l) * ey - l * tg(alpha/2) * ex

箭头的第三点：

a3x := bx - (w + l) * ex - l * tg(alpha/2) * ey
a3y := by - (w + l) * ey + l * tg(alpha/2) * ex

非常抱歉格式很不好，我不知道如何在此处使用数学标记。我希望在计算方面没有犯任何错误。

- Kolmar

Answer 2

编辑：您没有指明您的应用程序类型。如果您使用WinForms，this可能会有所帮助。这里是关于LineCap的MSDN文章。

- Alex Kovanev