Cairo: using a SVG as a shape (or Cairo Groups)
In this recipe, we will create a shape, or a Surface using Cairo verbs, from an image in SVG format.
This packages are very common, so you may probably have them installed.
First of all: the Gtk skeleton
This code is very simple. If you aren’t used to working with Gtk, please, see one of the manuals on the Internet…
The target is to have a Cairo Context, the main object to draw things on Cairo. This is easy, as we have an useful method on gtk.gdk.window that does the work for us: cairo_create(). The window we are going to use is inside a DrawingArea, so:
Ok. Nothing new until here. I’ve loaded the SVG using a gtk.gdk.pixbuf because Cairo can use this as a source, so drawing it is simple. Moreover, I’ve connected the expose_event of the drawing area to a method of Test.
Now, drawing time
Take a look into the method on_expose():
As you can see, there are three drawn things. The first one is the SVG as is, using a plain paint() method. Easy. The result may be:
Of course, without the border and the shadows… :p The second item we see is more interesting. I’m going to use the alpha channel in the original SVG as a mask: where the image is transparent, nothing is drawn, so only the opaque pixels are used to paint. To achieve this, I’m using a feature of Cairo called groups. A group is like a layer where you can draw things. The difference is that this ‘layer’ can be used later as a pattern or as a surface.
This time, I’ll only paint in black, which gives this:
¡Voilá! As you can imagine, if you use other color, blue for example, and paint with alpha enabled, you could get something like a shinning effect, like this:
which is the third item in our example. :) And that’s all, folks!
Thanks for reading.
PD: This is my first post in English, please, don’t take this into account…