[cairo] Circular Ring Gradient

Adrian Johnson ajohnson at redneon.com
Wed May 10 21:50:47 UTC 2017

On 11/05/17 06:27, cecashon at aol.com wrote:
> Hi Cairo folks,
> What is the best way to make a circular gradient in a ring? I have tried
> using both a Bezier approximation to a circle and just using trapezoids.
> The trapezoids work fine if I have 16 of them and then clip the ring. A
> little problem with not having continuous values in a ring so if I cut
> the ring at a particular location it has to be at the end of a trapezoid
> section if I want the gradient to fill to the end. Otherwise it looks to
> work well. Think there might be an easier way to do this though so I am
> asking about it. Has anyone had good success drawing circular gradients
> in a ring? I am looking to be able to add some Cairo gradients to a
> gauge widget so efficiency would be a good thing if the gauge needed to
> work with a frame clock.

Mesh patches can have Bézier curved sides. A circle can be approximated
with 8 Bézier curves. A ring can be created with 8 patches. See attached
example and output.
-------------- next part --------------
A non-text attachment was scrubbed...
Name: ring_gradient
Type: application/octet-stream
Size: 13792 bytes
Desc: not available
URL: <https://lists.cairographics.org/archives/cairo/attachments/20170511/2abefb10/attachment-0001.obj>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: ring_gradient.png
Type: image/png
Size: 25880 bytes
Desc: not available
URL: <https://lists.cairographics.org/archives/cairo/attachments/20170511/2abefb10/attachment-0001.png>

More information about the cairo mailing list