原文： https://zetcode.com/gfx/pycairo/clipmask/

在 PyCairo 教程的这一部分中，我们将讨论剪切和遮罩操作。

剪裁

剪裁是将绘图限制为特定区域。 这样做是出于效率方面的考虑，并会产生有趣的效果。 PyCairo 具有clip()方法来设置裁剪。

  1. #!/usr/bin/python
  3. '''
  4. ZetCode PyCairo tutorial 
  6. This program shows how to perform
  7. clipping in PyCairo.
  9. author: Jan Bodnar
  10. website: zetcode.com 
  11. last edited: August 2012
  12. '''
  14. from gi.repository import Gtk, GLib
  15. import cairo
  16. import math
  17. import random
  19. class Example(Gtk.Window):
  21.     def __init__(self):
  22.         super(Example, self).__init__()
  24.         self.init_ui()
  25.         self.load_image()
  26.         self.init_vars()
  28.     def init_ui(self):    
  30.         self.darea = Gtk.DrawingArea()
  31.         self.darea.connect("draw", self.on_draw)
  32.         self.add(self.darea)
  34.         GLib.timeout_add(100, self.on_timer)
  36.         self.set_title("Clipping")
  37.         self.resize(300, 200)
  38.         self.set_position(Gtk.WindowPosition.CENTER)
  39.         self.connect("delete-event", Gtk.main_quit)
  40.         self.show_all()
  42.     def load_image(self):
  44.         self.image = cairo.ImageSurface.create_from_png("beckov.png")
  46.     def init_vars(self):    
  48.         self.pos_x = 128
  49.         self.pos_y = 128
  50.         self.radius = 40
  52.         self.delta = [3, 3]        
  54.     def on_timer(self):
  56.         self.pos_x += self.delta[0]
  57.         self.pos_y += self.delta[1]        
  59.         self.darea.queue_draw()
  60.         return True           
  62.     def on_draw(self, wid, cr):
  64.         w, h = self.get_size()
  66.         if (self.pos_x < 0 + self.radius):
  67.             self.delta[0] = random.randint(5, 9)
  68.         elif (self.pos_x > w - self.radius):
  69.             self.delta[0] = -random.randint(5, 9)
  71.         if (self.pos_y < 0 + self.radius): 
  72.             self.delta[1] = random.randint(5, 9)
  73.         elif (self.pos_y > h - self.radius):
  74.             self.delta[1] = -random.randint(5, 9)        
  76.         cr.set_source_surface(self.image, 1, 1)
  77.         cr.arc(self.pos_x, self.pos_y, self.radius, 0, 2*math.pi)
  78.         cr.clip()
  79.         cr.paint()        
  81. def main():
  83.     app = Example()
  84.     Gtk.main()
  86. if __name__ == "__main__":    
  87.     main()

在此示例中，我们将裁剪图像。 圆圈在窗口区域上移动并显示基础图像的一部分。 这就像我们从孔中看一样。

  1. def load_image(self):
  3.     self.image = cairo.ImageSurface.create_from_png("beckov.png")

这是基础图像。 每个计时器周期，我们都会看到此图像的一部分。

  1. if (self.pos_x < 0 + self.radius):
  2.     self.delta[0] = random.randint(5, 9)
  3. elif (self.pos_x > w - self.radius):
  4.     self.delta[0]= -random.randint(5, 9)

如果圆碰到窗口的左侧或右侧，则圆的移动方向会随机变化。 顶部和底部也一样。

  1. cr.arc(self.pos_x, self.pos_y, self.radius, 0, 2*math.pi)

此行为 Cairo 上下文添加了一条循环路径。

  1. cr.clip()

clip()设置剪切区域。 裁剪区域是当前使用的路径。 当前路径是通过arc()方法调用创建的。

  1. cr.paint()

paint()在当前剪裁区域内的任何地方绘制当前源。

PyCairo 剪裁&遮罩 - 图1

图：剪裁

遮罩

在将源应用于表面之前，先对其进行过滤。 遮罩用作过滤器。 遮罩确定在哪里应用源，在哪里不应用。 遮罩的不透明部分允许复制源。 透明零件不允许将源复制到表面。

  1. #!/usr/bin/python
  3. '''
  4. ZetCode PyCairo tutorial 
  6. This program demonstrates masking.
  8. author: Jan Bodnar
  9. website: zetcode.com 
  10. last edited: August 2012
  11. '''
  13. from gi.repository import Gtk
  14. import cairo
  16. class Example(Gtk.Window):
  18.     def __init__(self):
  19.         super(Example, self).__init__()
  21.         self.init_ui()
  22.         self.load_image()
  24.     def init_ui(self):    
  26.         darea = Gtk.DrawingArea()
  27.         darea.connect("draw", self.on_draw)
  28.         self.add(darea)
  30.         self.set_title("Masking")
  31.         self.resize(310, 100)
  32.         self.set_position(Gtk.WindowPosition.CENTER)
  33.         self.connect("delete-event", Gtk.main_quit)
  34.         self.show_all()
  36.     def load_image(self):    
  38.         self.ims = cairo.ImageSurface.create_from_png("omen.png")
  40.     def on_draw(self, wid, cr):
  42.         cr.mask_surface(self.ims, 0, 0);
  43.         cr.fill()
  45. def main():
  47.     app = Example()
  48.     Gtk.main()
  50. if __name__ == "__main__":    
  51.     main()

在该示例中，遮罩确定在哪里绘画和在哪里不绘画。

  1. cr.mask_surface(self.ims, 0, 0);
  2. cr.fill()

我们使用图像作为遮罩，从而将其显示在窗口上。

PyCairo 剪裁&遮罩 - 图2

图：遮罩

蒙蔽效果

在此代码示例中，我们将忽略图像。 这类似于我们使用卷帘所做的。

  1. #!/usr/bin/python
  3. '''
  4. ZetCode PyCairo tutorial 
  6. This program creates a blind down
  7. effect using masking operation.
  9. author: Jan Bodnar
  10. website: zetcode.com 
  11. last edited: August 2012
  12. '''
  14. from gi.repository import Gtk, GLib
  15. import cairo
  16. import math
  18. class Example(Gtk.Window):
  20.     def __init__(self):
  21.         super(Example, self).__init__()
  23.         self.init_ui()
  24.         self.load_image()
  25.         self.init_vars()
  27.     def init_ui(self):    
  29.         self.darea = Gtk.DrawingArea()
  30.         self.darea.connect("draw", self.on_draw)
  31.         self.add(self.darea)
  33.         GLib.timeout_add(35, self.on_timer)
  35.         self.set_title("Blind down")
  36.         self.resize(325, 250)
  37.         self.set_position(Gtk.WindowPosition.CENTER)
  38.         self.connect("delete-event", Gtk.main_quit)
  39.         self.show_all()
  41.     def load_image(self):
  43.         self.image = cairo.ImageSurface.create_from_png("beckov.png")        
  45.     def init_vars(self):        
  47.         self.timer = True
  48.         self.h = 0
  49.         self.iw = self.image.get_width()
  50.         self.ih = self.image.get_height()   
  52.         self.ims = cairo.ImageSurface(cairo.FORMAT_ARGB32, 
  53.             self.iw, self.ih)           
  55.     def on_timer(self):
  57.         if (not self.timer):
  58.             return False
  60.         self.darea.queue_draw()
  61.         return True           
  63.     def on_draw(self, wid, cr):
  65.         ic = cairo.Context(self.ims)
  67.         ic.rectangle(0, 0, self.iw, self.h)
  68.         ic.fill()
  70.         self.h += 1
  72.         if (self.h == self.ih): 
  73.             self.timer = False
  75.         cr.set_source_surface(self.image, 10, 10)
  76.         cr.mask_surface(self.ims, 10, 10)        
  78. def main():
  80.     app = Example()
  81.     Gtk.main()
  83. if __name__ == "__main__":    
  84.     main()

盲目效应背后的想法很简单。 图像高度为 h 像素。 我们绘制高度为 1px 的 0、1、2 … 线。 每个周期，图像的一部分高 1px，直到整个图像可见为止。

  1. def load_image(self):
  3.     self.image = cairo.ImageSurface.create_from_png("beckov.png")

在load_image()方法中，我们从 PNG 图像创建图像表面。

  1. def init_vars(self):        
  3.     self.timer = True
  4.     self.h = 0
  5.     self.iw = self.image.get_width()
  6.     self.ih = self.image.get_height()   
  8.     self.ims = cairo.ImageSurface(cairo.FORMAT_ARGB32, 
  9.         self.iw, self.ih)

在init_vars()方法中，我们初始化一些变量。 我们启动self.timer和self.h变量。 我们得到加载图像的宽度和高度。 然后我们创建一个空的图像表面。 它将用我们之前创建的图像表面的像素线填充。

  1. ic = cairo.Context(self.ims)

我们从空图像源创建一个 cairo 上下文。

  1. ic.rectangle(0, 0, self.iw, self.h)
  2. ic.fill()

我们在最初为空的图像中绘制一个矩形。 矩形每个周期将高出 1 像素。 以这种方式创建的图像稍后将用作遮罩。

  1. self.h += 1

要显示的图像高度增加一个单位。

  1. if (self.h == self.ih): 
  2.     self.timer = False

当我们在 GTK 窗口上绘制整个图像时，我们将停止timer方法。

  1. cr.set_source_surface(self.image, 10, 10)
  2. cr.mask_surface(self.ims, 10, 10)

城堡的图像被设置为绘画的来源。 mask_surface()使用表面的 Alpha 通道作为遮罩来绘制电流源。

本章介绍了 PyCairo 中的剪裁和遮罩。