Hacker News new | ask | show | jobs
by GuB-42 524 days ago
For miter caps, you need 2, for bevel caps, you need 3.

But it is actually way more complicated than that in the general case. Notice how there is some overlap, not very pretty with transparency. There are ways around this problem, for example using a stencil buffer, but if you don't want that either and instead go a proper triangulation, this becomes quite involved.

The problem is when segments are shorter than the inner intersection point. In the example in the article, that's when I1 is outside of [A1, A1'] or [B1, B1']. Doing it properly would require taking the geometry of the entire figure into account, you can't just draw it segment by segment and fix the joints.

For example, if you draw a closed polygon that is smaller than the line thickness, all internal geometry will disappear so you have to triangulate the shape using only the outer vertices. How to calculate that looks like an interesting problem that would need a much longer blog post...

2 comments

You can do bevel with 2 if you accept intersections, which will always occur unless you ensure a minimum distance between points equal to the width of the line. https://i.imgur.com/1vWoAGV.png

In my context the line represents a player path so the transparency overlap created by the bevel intersection is actually perfectly fine and looks good. The same for intersections over a previous section of the path.

I might go back and add the pixel buffer method anyway so the rounded curves can be both smooth and non intersecting.

https://i.imgur.com/DXRkZGt.png

Yes, this problem seems intuitively not so hard -- but without flattening first to a pixel buffer, it is a formidable challenge.