K.I.S.S. – 简单哲学 Linux, Freedom, Arch, Python, Gtk+, C … Keep It Simple, Stupid!

使用 PyGTK 和 Cairo 编写一个简单的时钟

呵呵，其实说这个是个自定义控件也不为过。
先介绍一下 Cairo：Cairo 是一套提供设备独立的矢量图形 API 的二维图形库，支持很多不同的后端，如果可能的话，还可以使用硬件加速绘图。Cairo 是用 C 语言编写的，但是提供了很多其他语言的绑定，Factor, Haskell, Lua, Perl, Python, Ruby, Scheme, Smalltalk 等等。Cairo 基于 LGPL 和 MPL 双许可，这意味着你可以用它开发闭源软件。Cairo 是自由软件。
关于 Cairo 的更多详情，可以参照维基百科。
Cairo 的使用方法很简单，跟中学时学习的 LOGO 语言差不多，这里用 GTK+ 编写一个时钟出来。
首先，建立一个窗口。GTK+ 提供了一个专门用来画图的控件 DrawingArea，我们继承它，建立一个类 CairoDrwa，并且把一个对象加到窗口上去。虽然 GTK+ 本身提供了不少绘图功能，不过这里只说 Cairo。

import gtk, glib, math, time
class CairoDraw(gtk.DrawingArea):
   """Drawing with Cairo"""
   def __init__(self):
       super(self.__class__,self).__init__()

class MainWindow(gtk.Window):
   """Main window of the test program"""
   def __init__(self):
       super(self.__class__, self).__init__(gtk.WINDOW_TOPLEVEL)
       self.set_title("Cairo test")
       self.connect("delete-event", gtk.main_quit)

       cairo_test= CairoDraw()
       self.add(cairo_test)

   def main(self):
       self.show_all()
       gtk.main()

if __name__ == "__main__":
   window = MainWindow()
   window.main()

然后，连接事件。把这个类的 expose-event 连接到一个回调函数 on_expose 上去，expose-event 是一个“曝光”事件，在控件被显示的时候会触发此事件。

class CairoDraw(gtk.DrawingArea):
   """Drawing with Cairo"""
   def __init__(self):
       super(self.__class__,self).__init__()
       self.connect("expose-event", self.on_expose)

下面来写 on_expose 函数。首先我们要取得我们的 Cairo Context（可以理解为“画板”），这个画板是从 DrawingArea 中的 GdkWindow 中取得的。

    def on_expose(self, widget, event):
       context = widget.window.cairo_create()
       return False

我们需要设定 DrawingArea 的刷新区域。这样以后每次触发 expose-event 的时候，都会重绘这个区域。

    def on_expose(self, widget, event):
       context = widget.window.cairo_create()

       context.rectangle (event.area.x, event.area.y,
               event.area.width, event.area.height)
       context.clip()

       return False

我们把绘图的部分写在 draw 这个函数中，然后让控件每秒钟重绘一次。这样每秒时间改变的时候，图形就会刷新，指针就会动了。

    def on_expose(self, widget, event):
       context = widget.window.cairo_create()

       context.rectangle (event.area.x, event.area.y,
               event.area.width, event.area.height)
       context.clip()

       self.draw(context)

       glib.timeout_add(1000, self.queue_draw)
       return False

下面来写 draw 这个函数。
首先来画表盘，也就是一个圆。我们用 arc 函数来画一个弧线，这个弧线的角度从 0 到 2 * pi，也就是一个圆了。注意，这时候我们还没有上色，所以画板依然是空的。使用 set_source_rgb 来设定画笔颜色，fill_preserve 和 stroke 分别用于填充和描边。

    def draw(self, context):
       rect = self.get_allocation()
       x = rect.x + rect.width / 2
       y = rect.x + rect.height / 2
       radius = min(rect.width / 2, rect.height / 2) - 5

       context.arc(x, y, radius, 0, 2 * math.pi)
       context.set_source_rgb(1, 1, 1)
       context.fill_preserve()
       context.set_source_rgb(0, 0, 0)
       context.stroke()

接下来画刻度。很简单的算法，值得注意的是 save 和 restore 两个函数，这是一种类似堆栈的保存 Context 状态的方法，这样对线的长度修改之后，很容易就可以恢复过来。

        for i in xrange(12):
           context.save()

           if i % 3 == 0:
               inset = .2 * radius
           else:
               inset = .1 * radius
               line_width = context.get_line_width()
               context.set_line_width(.5 * line_width)

           context.move_to(
                   x + (radius - inset) * math.cos(i * math.pi / 6),
                   y + (radius - inset) * math.sin(i * math.pi / 6))
           context.line_to(
                   x + radius * math.cos(i * math.pi / 6),
                   y + radius * math.sin(i * math.pi / 6))
           context.stroke()
           context.restore()

最后，对指针进行绘制。和表盘差不多的算法。

        tm_hour, tm_min, tm_sec = time.localtime()[3:6]
       handlist = (
               (tm_hour, .3, 12, 1.5),
               (tm_min, .2, 60, 1),
               (tm_sec, .1, 60, .5),
               )
       for (hand, inset, num, width) in handlist:
           context.save()

           inset *= radius
           line_width = context.get_line_width()
           context.set_line_width(width * line_width)
           context.move_to(
                   x + (radius - inset) * math.sin(2 * hand * math.pi / num),
                   y - (radius - inset) * math.cos(2 * hand * math.pi / num))
           context.line_to(x, y)
           context.stroke()

           context.restore()

这样，一个简单的时钟程序就做好了。源代码在这里。
参考：Writing a Widget Using Cairo and PyGTK 2.8
PS：晕，写完了才发现这篇文章还有下半部分……

转载请注明：转自K.I.S.S. - 简单哲学 - 使用 PyGTK 和 Cairo 编写一个简单的时钟

你可能对这些感兴趣：

1. 在自己的 GTK+ 程序中加入 RGBA 透明支持
2. Linux下国际化编程（Gettext、i18n)
3. GtkApplication – GTK+ 3 中的 Application 支持