Computer Graphics Stack Exchange is a question and answer site for computer graphics researchers and programmers. It only takes a minute to sign up.
Sign up to join this community
I'm just trying to figure out, how rounded corners are usual drawn for user interfaces in a performant way & as insight also try to figure out how it's done in Browser, as they allow for variable round corners (without being blurry) :)
In the end I try to use some of this information for the implementation of the user-interface of my game.
Speaking from my own experience...
There is no one answer to the question of "how is this UI interface element drawn".
Under windows you can get them as freebies where the OS gives you a helping hand but windows tends to be very inflexible with its ready made UI element and tends to boil down to "styles". But windows also provides its own graphics environment which is powerful enough that the text CGP&P uses it to introduce graphics programming.
Linux is similar but with its own strange and wonderful quirks. But without the manufacturer provided graphics environment.
Beyond that, browser designers are on their own and can use a variety of techniques, here are some:
Bitmap graphics: This is a bit old in terms of windows... but you can just save your own "bitmaps" rendered however you like, then load them up and blast them to the screen just like any other texture map. But the usual caveats apply.
Just draw them on the fly: Basically create functions that have all the details of drawing the UI the way the project demands. Then when a UI element is needed the function provides the details on drawing the element. This approach can be kept simple or you can go crazy and end up with a vast and complex interface that only the designer understands.
Many graphics environments provide some sort of help with all this, but it sounds like you are writing that environment.
There are some new techniques that are emerging, the slug library (which is a font rendering algorithm but can be used to draw many other UI elements) allow "glyphs" to be drawn. Using glyphs you can draw beautifully rounded and even complex corners that render surprisingly fast, scale almost perfectly, look great from any angle, the list goes on. But the algorithm behind slug is patented so you have to pay for the privilege.
For a simple rounded edge that looks good as a 2d element you can draw a circle at each corner, then connect the corners with straight lines. For a "shadow" draw 2 circles slightly offset from one another, draw the shadow circle slightly darker. Then draw a rectangle inside the entire works, and then the text or whatever is needed inside the rectangle. I know this sounds simplistic, but if done well it can look really nice, is straight forward to implement and performant. Be sure to draw the UI first and use depth buffering to help with whatever is drawn behind the UI.
I'm not sure of the current state of the art, but this style of drawing windows with rounded corners originated in the NeWS graphical environment for Unix workstations. And it was accompanied by an additional nonstandard operator arcto into Sun's customized PostScript dialect which was then adopted into PostScript Level 2.
x1 y1 x2 y2 r arcto xt1 yt1 xt2 yt2 append tangent arc
returns the two tangent point coordinates
(xt1, yt1) and (xt2, yt2) in user space.
The usage of this operator can be seen in the example of the similar operator arct which does the same drawing but does not return tangent points.
Changing arct to arcto in this example would return the points 0 3 and 1 4 while the programmer only needs to specify the points 0 0, 0 4, 4 4 and the radius 1.
I was given a longer usage example that draws a full rectangle (er ... rectar) when I asked about this operator in comp.lang.postscript.
So, a broader answer to the question is that rounded corners can be handled at the vector graphics level, pre-rendering. You can insert arc segments in the places where the corners would be into a path and then either stroke or fill the result and apply any anti-aliasing or blurring effects at the rasterization stage.
