Some graphics systems (such as HTML5 canvas) support drawing lines, but not arrows. There are many web pages explaining how to draw arrows with lines, but these typically involve trigonometry: functions like sin, cos, and atan. Here, we'll show a different way to draw arrows. The final procedure is very simple, but the inspiration comes from complex numbers.
|
Suppose we want to draw an arrow from a point (x0, y0) to a point (x1, y1). We can think of these two points as complex numbers: c0 = x0 + y0 i
c1 = x1 + y1 i
|
|
|
First, we compute a complex number in the direction of the arrow, scaled down to length 1: a = (c1 - c0) / | c1 - c0 | Multiplying by i rotates this 90 degrees: r = a iThese complex numbers are both are drawn 100x actual size for clarity. |
|
|
Now we can specify critical points on the arrow in terms of these complex numbers. Here, we'll draw a giant arrowhead for clarity. All that remains is connect up these points. This actually translates to simple code! |
|