In my last post I introduced myself to snapsvg.io. In this post, I throw an arrow head onto a line. And am glad for remembering just enough trigonometry to get by.
The requirements are:
- The arrow head has to be on one side of the line, let’s call that “the end” of the line.
- Both sides of the line are draggable (check! covered that in the last post).
- Each line of the arrow head should extend in a 45 degree angle off the main line.
- Each line of the arrow should be a constant length, say… 40 pixels, no matter how long the line is.
- And, as the line is manipulated (by dragging “the beginning” or end of the line), the arrow head moves in tandem.
I want to determine the rules for how an arrow head should be placed at any point in time. Here’s a start:
I’m tryingto come up with x,y coordinates of the points equi-distant from each end of – and 45 degrees out from – the main line.
On the left side of the page pictured above, I tried to do it algebraically. Thinking that might be more performant than using trigonometry functions. But I changed my mind once I got to the equation on bottom. I went with the trig functions on the right.