Question

I am developing graph application. In app window there are vertices conneted by edges. User is able to move vertex, and as he do it edge also moves. I am having problem to find pattern to draw arrow representing edge direction depending on both vertex positions.

Here’s an example.

Lets say vertex has width/height = 20px; Edge is drawn from center of Vertex1 to center of 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);

Question is: Knowing position of edge start/end points, how to calculate arrow points?

Answer 1

Let’s say edge’s starting point has coordinates (ax, ay), ending point (bx, by), the vertex has radius w, your arrow has the length of its pointer l and the angle between the arrow edges alpha
Then in pseudocode:

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

The first point of the arrow:

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

The second point of the arrow:

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

The third point of the arrow:

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

Sorry for such poor formatting, I don’t know how to use mathematical markup here. And I hope I didn’t make any errors in the calculations.