sure, this looks very simple right. It is simple depending on the technology being used. If its HTML5, you can use CSS to define the radius of the corner. But imagine if you were doing in c# using the drawing classes in .net.
Before, I saw any other words, let me say there are many ways to solve this problem.
So, I spent numerous hours trying to solve this problem last weekend, and I miserably failed, I failed due to couple of things. A line can have many bends, so the above dotted line has a bend lets say bottom left and a bend at top right. So here's an example:
Let's identify each corner as shown in the above pic, Top Left (TL), Top Right (TR), Bottom Left (BL), Bottom Right (BR). The other thing that I realized was each corner has two possibilities, here's what I mean, lets take the Top Left (TL) corner, depending on the source and destination of the points, there are 2 possible corners for the Top Left (TL). Here's what I mean:
So as you can see, depending on direction of the line, the corner has 2 possibilities. So, I called these the following:
- Top Left - West South
- Top Left - North East
So here are my actual notes that I did in OneNote trying to figure out what these corners should be called and how to determine what corner is what based on 3 points, point 1, midpoint, and point 2.
So once I figured out the corners, their computations, off the drawing board into coding. I wrote the algorithm, and guess what I failed. It did not work, I was not taking into account multiple bends of the line. So using my research I decided to try a different algorithm. Draw the lines as if they are straight lines and then erase the corners. So something like this.
So the corners are gone now, and we know where the corners are, now we can draw round corners (also called ARCs in math). So we end up with something like this.
I know the corners don't look great, I just drew these using my surface pen. But here's a real example from our cDevWorkflow product with nice round corners for the lines.
Don't these lines look very nice. So this algorithm is used by our cDevWorkflow product's graphics engine when generating graphical representation of a Workflow definition or instance.
It's fun to innovate, technology is changing every day, so keep innovating..........