• Home
  • Categories
  • WIKI
  • LANGUAGE: en
    • cairo学习笔记二(初级入门)
    社区开发 2320 views · 0 replies ·
    Tofloor
    poster avatar
    z85525006
    deepin
    2012-02-20 06:00
    Author
    歌词显示
    2. #!/usr/bin/env python
    3. # coding:utf-8
    6. import cairo
    7. import gtk
    9. #本篇讲述如何处理文本。
    10. #老男孩
    11. #第一个示例是在 GTK+ 窗口中显示《老男孩》的部分歌词。
    12. #原作者: http://liyanrui.is-programmer.com/2010/4/7/cairo-text.16643.html
    14. class App(object):
    15.     def __init__(self):
    16.         #抛砖引玉,歌词就靠你发挥了.
    17.         window = gtk.Window(gtk.WINDOW_TOPLEVEL)
    18.         window.set_position(gtk.WIN_POS_CENTER)
    19.         window.set_title("老男孩歌词显示")
    20.       
    21.         window.set_position(gtk.WIN_POS_CENTER)
    22.         window.set_app_paintable(True)
    23.       
    24.         window.set_default_size(300, 300)
    26.         window.connect("destroy", lambda w:gtk.main_quit())      
    27.         window.connect_after("expose-event",
    28.                              lambda w,e:self.on_expose_event(w,e))   
    29.         
    30.         self.angle = 0
    31.         self.scale = 1
    32.         self.delta = 0.01
    33.         window.set_opacity(0.9)
    34.         window.set_app_paintable(True)
    35.         window.show_all()
    36.         
    37.     def on_expose_event(self, widget, event):
    38.         
    39.         cr = widget.window.cairo_create()
    40.         
    41.         cr.set_source_rgb(0.1, 0.1, 0.1)
    42.         cr.select_font_face("Purisa",
    43.                             cairo.FONT_SLANT_NORMAL,
    44.                             cairo.FONT_WEIGHT_BOLD)
    45.         #这里设置字体。这个函数接受了三个字体参数的传入，字体的名称(倾斜)、样式与轻重
    46.         cr.set_font_size(23)
    47.         
    48.         cr.move_to(20, 30)
    49.         cr.set_source_rgb(1,0,0)
    50.         cr.show_text("那")
    51.         
    52.         cr.set_source_rgb(0, 0, 0)
    53.         cr.move_to(45,30)
    54.         cr.show_text("是我日夜思念深深爱着的人啊")
    55.         cr.move_to(20, 60)
    56.         cr.show_text("到底我该如何表达 她会接受我吗")
    57.         
    58.         cr.move_to(20, 90)
    59.         cr.set_source_rgb(1, 0,0)
    60.         cr.show_text("也许永远都不会跟她说出那句")
    61.         cr.set_source_rgb(1,1,1)
    62.         cr.move_to(22,90)
    63.         cr.show_text("也许永远都不会跟她说出那句话")
    64.         
    65.         return True
    67. App()
    68. gtk.main()
    Copy the Code

    一个字一个字显示
    1. #!/usr/bin/env python
    2. # coding:utf-8
    3. #邱海龙就是一个菜鸟,垃圾.滚吧...
    5. import cairo
    6. import gtk
    8. text = ["L", "i", "n", "u", "x", "d", "e"]
    9. timer = True
    12. class App(object):
    13.     def __init__(self):
    14.         
    15.         window = gtk.Window(gtk.WINDOW_TOPLEVEL)
    16.         window.set_position(gtk.WIN_POS_CENTER)
    17.         window.set_title("一个字接一个字... ...")
    18.       
    19.         window.set_position(gtk.WIN_POS_CENTER)
    20.         window.set_app_paintable(True)
    21.       
    22.         window.set_default_size(300, 300)
    24.         window.connect("destroy", lambda w:gtk.main_quit())      
    25.         window.connect_after("expose-event",
    26.                              lambda w,e:self.on_expose_event(w,e))   
    27.         gtk.timeout_add(1000, self.time_handler, window)
    29.         self.count = 0
    31.         window.set_app_paintable(True)
    32.         window.show_all()
    33.    
    34.     def time_handler(self, widget):
    35.         widget.queue_draw()
    36.         if not timer: return False
    37.         return True
    38.    
    39.     def on_expose_event(self, widget, event):
    40.         cr = widget.window.cairo_create()
    41.         
    42.         cr.select_font_face("Courier",
    43.                             cairo.FONT_SLANT_NORMAL,
    44.                             cairo.FONT_WEIGHT_BOLD)
    45.         
    46.         cr.set_font_size(35)
    47.         cr.set_source_rgb(0.2, 0.2, 0.2)
    48.         
    49.         self.x = 0
    50.         for i in range(0,self.count):
    51.             extents = cr.text_extents(text[i])
    52.             print extents
    53.             width = extents[2]
    54.             width += 2
    55.             self.x += width
    56.             cr.move_to(self.x+30, 50)
    57.             cr.show_text(text[i])      
    58.             
    59.             
    60.         self.count += 1
    61.         
    62.         if self.count == 8:
    63.             timer = False
    64.             self.count = 0
    65.             
    66.         return True
    68. App()
    69. gtk.main()
    Copy the Code
    将上面一个个字显示和上面的例子合体,就能实现那样的 歌词 动过去的....
    ==================
    膨胀

    下面这个示例中，我们制造了一种膨胀的效果。这个示例显示了一串在膨胀的居中文本，并且伴有淡出现象。这是很常见的效果，在 flash 动画里经常见到。
    2. #!/usr/bin/env python
    3. # coding:utf-8
    6. import cairo
    7. import gtk
    9. text = ["z", "e", "t", "c", "o", "d", "e"]
    10. timer = True
    12. class App(object):
    13.     def __init__(self):
    14.         
    15.         window = gtk.Window(gtk.WINDOW_TOPLEVEL)
    16.         window.set_position(gtk.WIN_POS_CENTER)
    17.         window.set_title("字体膨胀效果")
    18.       
    19.         window.set_position(gtk.WIN_POS_CENTER)
    20.         window.set_app_paintable(True)
    21.       
    22.         window.set_default_size(300, 300)
    24.         window.connect("destroy", lambda w:gtk.main_quit())      
    25.         window.connect_after("expose-event",
    26.                              lambda w,e:self.on_expose_event(w,e))   
    27.         self.alpha = 1.0
    28.         self.size  = 1
    29.         
    30.         gtk.timeout_add(14, self.time_handler, window)
    31.         
    32.         window.set_app_paintable(True)
    33.         window.show_all()
    34.    
    35.     def on_expose_event(self, widget, event):        
    36.         
    37.         cr = widget.window.cairo_create()
    38.         
    39.         
    40.         #获取窗口中心坐标
    41.         x = widget.allocation.width /2
    42.         y = widget.allocation.height /2
    44.         cr.set_source_rgb(0.5, 0, 0)
    45.         cr.paint()
    46.         #将背景设为暗红色
    47.         cr.select_font_face("Courier",
    48.                             cairo.FONT_SLANT_NORMAL,
    49.                             cairo.FONT_WEIGHT_BOLD)
    50.         
    51.         self.size += 0.8#每论循环,字号增长0.8个单位
    52.         
    53.         if self.size > 20:
    54.             self.alpha -= 0.01
    55.         
    56.         cr.set_font_size(self.size)
    57.         cr.set_source_rgb(1, 1, 1)
    58.         
    59.         extents = cr.text_extents("ZetCode")
    60.         cr.move_to(x-extents[2]/2, y)
    61.         
    62.         #获取文本的路径,并将其设为当前的裁剪域
    63.         cr.text_path("ZetCode")
    64.         cr.clip()
    65.         #绘制当前的路径,添加alpha值,谈出效果
    66.         cr.stroke()
    67.         cr.paint_with_alpha(self.alpha)
    68.       
    69.         if self.alpha <= 0:
    70.             self.alpha = 1.0
    71.             self.size = 1
    72.         return True
    73.    
    74.     def time_handler(self, widget):
    75.         if not timer:
    76.             return False
    77.         widget.queue_draw()
    78.         return True
    79.    
    80. App()
    81. gtk.main()
    Copy the Code

    在这一篇里，要讲述图像的处理。先是演示如何在 GTK+ 窗口中显示一幅图像，然后再制造一些特效。


    图像的显示

    在第一个例子里，显示了一幅图像。

    2. #!/usr/bin/env python
    3. # coding:utf-8
    6. import cairo
    7. import gtk
    9. class App(object):
    10.     def __init__(self):
    11.         
    12.         window = gtk.Window(gtk.WINDOW_TOPLEVEL)
    13.         window.set_position(gtk.WIN_POS_CENTER)
    14.         window.set_title("图形的显示")
    15.       
    16.         window.set_position(gtk.WIN_POS_CENTER)
    17.         window.set_app_paintable(True)
    18.         self.image = cairo.ImageSurface.create_from_png("linuxdeepin.png")
    19.         window.set_default_size(300, 300)
    21.         window.connect("destroy", lambda w:gtk.main_quit())      
    22.         window.connect_after("expose-event",
    23.                              lambda w,e:self.on_expose_event(w,e))   
    24.       
    25.         window.set_app_paintable(True)
    26.         
    27.         window.show_all()
    28.    
    29.     def on_expose_event(self, widget, event):        
    30.         cr = widget.window.cairo_create()
    31.         cr.set_source_surface(self.image, 10, 10)
    32.         cr.paint()
    33.         return True
    35. App()
    36. gtk.main()
    Copy the Code
    1. [/code]linuxdeepin.png
    2. ======================================================
    3. 垂帘效果（Blind Down）
    5. 在下面的代码示例中，要垂帘显示图片，就像拉下窗帘的那种效果。
    6. [code]
    7. #!/usr/bin/env python
    8. # coding:utf-8
    11. import cairo
    12. import gtk
    14. timer = True
    16. class App(object):
    17.     def __init__(self):
    18.         
    19.         window = gtk.Window(gtk.WINDOW_TOPLEVEL)
    20.         window.set_position(gtk.WIN_POS_CENTER)
    21.         window.set_title("垂帘效果")
    22.       
    23.         window.set_position(gtk.WIN_POS_CENTER)
    24.         window.set_app_paintable(True)
    25.         #图片
    26.         self.image = cairo.ImageSurface.create_from_png("linuxdeepin.png")
    27.         gtk.timeout_add(15, self.time_handler, window)
    28.         
    29.         self.angle = 0
    30.         self.image_width = 0
    31.         self.image_height = 0
    32.         self.w = 0
    33.         self.h = 0
    34.         
    35.         window.set_default_size(300, 300)
    37.         window.connect("destroy",
    38.                        lambda w:gtk.main_quit())
    39.         window.connect_after("expose-event",
    40.                              lambda w,e:self.on_expose_event(w,e))   
    41.         window.set_app_paintable(True)
    42.         window.show_all()
    43.    
    44.     def on_expose_event(self, widget, event):        
    45.         cr = widget.window.cairo_create()
    46.         width, height = widget.get_size()
    47.         
    48.         self.image_width = self.image.get_width()
    49.         self.image_height = self.image.get_height()
    50.         
    51.         self.w = self.image_width
    52.         #创建一个图像外观,并通过它构造那个于图形相关联的cairo环境
    53.         surface = cairo.ImageSurface(cairo.FORMAT_ARGB32,
    54.                                      self.image_width,
    55.                                      self.image_height)
    56.         
    57.         ic = cairo.Context(surface)
    58.         #在初始的空图形中绘制一个矩形,它在循环显示h+1,
    59.         #采用这种方式创建的图像在后面要作为蒙板来用
    60.         ic.rectangle(0, 0, self.w, self.h)
    61.         ic.fill()
    62.         
    63.         self.h += 1
    64.         #slef.h和图片高度相等的时候,呵呵呵呵,你知道的.
    65.         if self.h == self.image_height:
    66.             self.h = 1
    67.             #timer = False
    68.         
    69.         #深度图片被设置为要绘制的源,并采用surface的alpha通道作为
    70.         #蒙板来绘制这个源
    71.         cr.set_source_surface(self.image, 10, 10)
    72.         cr.mask_surface(surface, 10, 10)
    73.         
    74.         # cr,ic
    75.         # 声明两个 cairo环境, 一个与gtkWindow相关联,另一个和图片相关联
    76.         #蒙板 就是在Linux图标在撒上一层细沙
    77.         #细沙把底图遮盖住，它就相当于蒙版
    78.         #如果你想把底图的一部分显现出来，就可以用手指（相当于使用蒙版时的画笔，且前景为黑）把细沙划去一些，如果想再把显出来的一部分盖住则又可以在上面撒上一层沙子（相当于前景色设为白色，用画笔涂沫）t
    79.         return True
    80.    
    81.     def time_handler(self, widget):
    82.         if not timer:
    83.             return False
    84.         widget.queue_draw()
    85.         return True
    86.         
    87. App()
    88. gtk.main()
    Copy the Code

    百叶窗效果
    2. #!/usr/bin/env python
    3. # coding:utf-8
    6. import cairo
    7. import gtk
    9. timer = True
    11. class App(object):
    12.     def __init__(self):
    13.         
    14.         window = gtk.Window(gtk.WINDOW_TOPLEVEL)
    15.         window.set_position(gtk.WIN_POS_CENTER)
    16.         window.set_title("百叶窗口")
    17.       
    18.         window.set_app_paintable(True)
    19.         #图片
    20.         self.image = cairo.ImageSurface.create_from_png("linuxdeepin.png")
    21.         gtk.timeout_add(400, self.time_handler, window)
    22.         
    23.         self.angle = 0
    24.         self.image_width = 0
    25.         self.image_height = 0
    26.         self.w = 0
    27.         self.h = 0
    28.         self.count = 0
    30.         window.set_default_size(300, 300)
    32.         window.connect("destroy",
    33.                        lambda w:gtk.main_quit())
    34.         window.connect_after("expose-event",
    35.                              lambda w,e:self.on_expose_event(w,e))   
    37.         window.show_all()
    38.    
    39.     #百叶窗口
    40.     def on_expose_event(self, widget, event):        
    41.         cr = widget.window.cairo_create()
    42.         width, height = widget.get_size()
    43.         
    44.         surface = cairo.ImageSurface(cairo.FORMAT_ARGB32,
    45.                                      self.image_width,
    46.                                      self.image_height)
    47.         
    48.         self.image_width = self.image.get_width()
    49.         self.image_height =self.image.get_height()
    50.         
    51.         self.w = self.image_width
    52.         
    53.         ic = cairo.Context(surface)
    54.         
    55.         for i in range(0, self.image_height+1,7):
    56.             for j in range(0, self.count):
    57.                 ic.move_to(0, i+j)
    58.                 ic.line_to(self.w, i+j)
    59.                
    60.         ic.stroke()
    61.         self.count += 1
    62.         if self.count == 8: self.count = 0
    63.         
    64.         cr.set_source_surface(self.image, 10, 10)
    65.         cr.mask_surface(surface, 10, 10)
    66.         #这个 百叶原理很简单.
    67.         # 就是在蒙板上 每间隔 7 ,就从0 到 图片宽度.高度是i+j.
    68.         #然后每400毫秒 就加1,慢慢的就形成了 百叶效果t
    69.         return True
    70.    
    71.     def time_handler(self, widget):
    72.         if not timer:
    73.             return False
    74.         widget.queue_draw()
    75.         return True
    76.         
    77. App()
    78. gtk.main()
    Copy the Code
    Reply Favorite View the author
    All Replies

    No replies yet