How do I create a circular shadow effect using cairo?

I am trying to improve the graphical appearance of my application by giving a picture a subtle drop shadow effect. I am using python and cairo drawing.

In the below example code, I can draw an outer circle and an inner circle with an image as shown.

pic

What I want to do is replace this outer circle with a shadow effect.

I am guessing that I need to use a linear gradient or a radial gradient, but I cannot find a good example of what I want to achieve.

Has anyone told me in the right direction please?

from gi.repository import Gtk
from gi.repository import Gdk
from gi.repository import GdkPixbuf

import cairo
import math

class MyWindow (Gtk.Window):

    def __init__(self):
        Gtk.Window.__init__(self, title='MyWindow')

        darea = Gtk.DrawingArea()
        darea.connect('draw', self.on_draw)
        self.add(darea)

        self.width, self.height = self.get_size()

        filename = "/usr/share/backgrounds/Thingvellir_by_pattersa.jpg"

        if self.width > self.height:
            self.width = self.height
        else:
            self.height = self.width

        self.width = self.width
        self.height = self.height

        self.pixbuf = GdkPixbuf.Pixbuf.new_from_file(filename)
        self.pixbuf = self.pixbuf.scale_simple(self.width, self.width, GdkPixbuf.InterpType.BILINEAR)

    def on_draw(self, widget, cr):

        w = self.width
        h = self.height

        # draw outer circle
        cr.translate(w/2, h/2)
        cr.set_line_width(10)

        cr.set_source_rgb(0.7, 0.2, 0.0)
        cr.arc(0, 0, w/2, 0, 2*math.pi)
        cr.stroke_preserve()
        cr.stroke()

        # now reset the origin and set the picture to be the source
        cr.translate(-w/2, -h/2)

        Gdk.cairo_set_source_pixbuf(cr, self.pixbuf, 0, 0)

        # now reset the origin again and this time clip the pixbuf 
        cr.translate(w/2, h/2)

        cr.arc(0, 0, w/2.2, 0, 2*math.pi) # was 2.2
        cr.stroke_preserve()
        cr.clip()
        cr.paint()

win = MyWindow()
win.connect('delete-event', Gtk.main_quit)
win.show_all()
Gtk.main()

      

Using Ubuntu 14.04 - Gtk + 3.10, python3

+3


source to share





All Articles