[cairo] Button Graphic

[Jeremy Moles]

Hello all. :)

I'm using Cairo with OpenSceneGraph to create a HUD system, and I'm
working on creating a demo which will use Cairo to render a nice, vector
button object at any resolution. The first screenshot is my "base"
button image, and the second screenshot is my _attempt_ at adding a
"glossy overlay" that will be rendered when the mouse is over the
button. However, as you can see, the "gloss" is extremely poor, and done
incorrectly.

My question is: how would you guys achieve this same effect with high
quality results? First of all, I'm not entire sure I'm even approaching
it properly: I create a radial gradient, set the operator to ATOP and
extend to NONE, and fill_preserve() that on top of my existing "base"
button. The main visual unsightliness (imo) is the jaggies along the
edge of the radial gradient, which I'm guessing are a result of my
improper usage of the ATOP operator...

Also: do you think it would look better if I just "glossed" the inner
part of the button, leaving the outlines unaffected? ANY recommendations
are welcome, as I'm coming back to Cairo after a very long hiatus and
never really fully learned the essentials of vector graphics in the
first place (though I've become quite good at using and wrapping the
API :)).
-------------- next part --------------
A non-text attachment was scrubbed...
Name: button.png
Type: image/png
Size: 8923 bytes
Desc: not available
Url : http://lists.cairographics.org/archives/cairo/attachments/20080128/73057cc0/attachment.png 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: button-over.png
Type: image/png
Size: 9637 bytes
Desc: not available
Url : http://lists.cairographics.org/archives/cairo/attachments/20080128/73057cc0/attachment-0001.png