Cairo: Stroke Gradients

My last post was written rather hastily, and the Lazy Web indeed noticed some silly mistakes; for one thing, the || operator makes 'if' statements much smaller, and the code that configures your GdkWindow.Devices should be handled on Realize, not on Configure.

I was also rather ambiguous as to what I meant about applying a gradient to a stroke (as opposed to a fill). Yes, it is possible, and quite straightforward:

Linear Gradient on Four Line Segments

Code for that is available here.

Cairo gives you a radial gradient and a linear gradient for free. The gradient, however, is applied to the image as a whole. What I want to be able to do is draw a stroke and have the gradient be applied along the path of the stroke itself, rather than what you see in the above screenshot. So, if I set a black color stop at 0.0 and a red color stop at 1.0 (as I did above), I would want the black to start at the top-left corner of the square, and change to red along the path itself, ending as red back where it started in the top-left. If I fill that square using the same linear gradient, you can see what is actually happening:

Linear Gradient on a Square

Anyway, just because I wanted to see pressure-sensitive results in Virtual Paper, I reworked the stroke drawing code to stroke for each line segment with the color (pressure) of that line segment. It actually looks really nice, and doesn't slow down like I was afraid it would:

Virtual Paper: Now, with Pressure Sensitivity!

This screenshot shows why I'd like to be able to apply a gradient to a stroke. Fortunately, it also shows that the results without a gradient are still pretty spectacular:

Why I want Stroke Gradients and Bezier Curves

Since it looks decent without gradients and the performance doesn't take any noticeable hit with extra calls to Stroke() (and am I insane for thinking there would be a noticeable hit?), this one will be on the back burner for a little while.  It'll become important again for things like SVG export, since you want to actually have a scalable vector graphic and not a bunch of line segments that don't flow with each other.

4 Responses to “Cairo: Stroke Gradients”

  1. Surfing the Tubes at Aaron Bockover Says:

    [...] My good friend Jeff Tickle is working on an awesome Tomboy/Gtk# project called Virtual Paper, and has been making some wonderful progress. He could really use some expert Cairo advise regarding custom gradients on a stroke. I think Jeff should always blog from Virtual Paper itself and never again use the keyboard. [...]

  2. Piotr Says:

    Awesome! I've been really excited to see Virtual Paper got accepted as SOC project and those screenshots only confirm that you're doing a great job.
    I'm working on a mind mapping application (www.psycho-project.org) for which that kind of widget would be a perfect complement. Can't wait to give it a try when you're done.

    Some more screenshots:
    http://www.flickr.com/photos/piotrzurek/sets/72157600085637804/

  3. Christopher Says:

    This is great. Can't wait to see this integrated with Tomboy!

    You really need to get yourself on Planet GNOME or at least Planet SoC so everyone can share in the awesomeness... :)

  4. cp cerebral Says:

    cp cerebral

Leave a Reply