Question

I’ve been working in JavaScript to code a line drawing system. I’d like the lines drawn to be selectable, so I’ve been attempting to implement line-highlighting. As you can see in the image below, I have a line (in black) with known coordinates and an equation in slope-intercept (y=mx+b). How can I calculate the corners’ (circled in green) coordinates, knowing the box’s radius?

Answer 1

This is easiest to think of in terms of vectors.

Start off by defining the point at the end of the line as A, and the other end as B

var A = new Vector(1, 1)
var B = new Vector(5, 3)

Now find the unit direction vector of the line (a vector of length 1 pointing from A to B), and its perpendicular:

var dir = B.minus(A).normalize();
var dir_perp = new Vector(dir.y, -dir.x)

And extend them to be of length thickness:

dir = dir.times(thickness);
dir_perp = dir_perp.times(thickness)

The four corners are then:

[
    A.minus(dir).plus(dir_perp),
    A.minus(dir).minus(dir_perp),
    B.plus(dir).minus(dir_perp),
    B.plus(dir).plus(dir_perp)
]

This obviously assumes you have some sort of vector math library. Here’s one I made earlier