PyCairo 剪裁&遮罩 · ZetCode 中文系列教程

# PyCairo 剪裁&遮罩 > 原文： [https://zetcode.com/gfx/pycairo/clipmask/](https://zetcode.com/gfx/pycairo/clipmask/) 在 PyCairo 教程的這一部分中，我們將討論剪切和遮罩操作。 ## 剪裁剪裁是將繪圖限制為特定區域。這樣做是出于效率方面的考慮，并會產生有趣的效果。 PyCairo 具有`clip()`方法來設置裁剪。 ```py #!/usr/bin/python ''' ZetCode PyCairo tutorial This program shows how to perform clipping in PyCairo. author: Jan Bodnar website: zetcode.com last edited: August 2012 ''' from gi.repository import Gtk, GLib import cairo import math import random class Example(Gtk.Window): def __init__(self): super(Example, self).__init__() self.init_ui() self.load_image() self.init_vars() def init_ui(self): self.darea = Gtk.DrawingArea() self.darea.connect("draw", self.on_draw) self.add(self.darea) GLib.timeout_add(100, self.on_timer) self.set_title("Clipping") self.resize(300, 200) self.set_position(Gtk.WindowPosition.CENTER) self.connect("delete-event", Gtk.main_quit) self.show_all() def load_image(self): self.image = cairo.ImageSurface.create_from_png("beckov.png") def init_vars(self): self.pos_x = 128 self.pos_y = 128 self.radius = 40 self.delta = [3, 3] def on_timer(self): self.pos_x += self.delta[0] self.pos_y += self.delta[1] self.darea.queue_draw() return True def on_draw(self, wid, cr): w, h = self.get_size() if (self.pos_x < 0 + self.radius): self.delta[0] = random.randint(5, 9) elif (self.pos_x > w - self.radius): self.delta[0] = -random.randint(5, 9) if (self.pos_y < 0 + self.radius): self.delta[1] = random.randint(5, 9) elif (self.pos_y > h - self.radius): self.delta[1] = -random.randint(5, 9) cr.set_source_surface(self.image, 1, 1) cr.arc(self.pos_x, self.pos_y, self.radius, 0, 2*math.pi) cr.clip() cr.paint() def main(): app = Example() Gtk.main() if __name__ == "__main__": main() ``` 在此示例中，我們將裁剪圖像。圓圈在窗口區域上移動并顯示基礎圖像的一部分。這就像我們從孔中看一樣。 ```py def load_image(self): self.image = cairo.ImageSurface.create_from_png("beckov.png") ``` 這是基礎圖像。每個計時器周期，我們都會看到此圖像的一部分。 ```py if (self.pos_x < 0 + self.radius): self.delta[0] = random.randint(5, 9) elif (self.pos_x > w - self.radius): self.delta[0]= -random.randint(5, 9) ``` 如果圓碰到窗口的左側或右側，則圓的移動方向會隨機變化。頂部和底部也一樣。 ```py cr.arc(self.pos_x, self.pos_y, self.radius, 0, 2*math.pi) ``` 此行為 Cairo 上下文添加了一條循環路徑。 ```py cr.clip() ``` `clip()`設置剪切區域。裁剪區域是當前使用的路徑。當前路徑是通過`arc()`方法調用創建的。 ```py cr.paint() ``` `paint()`在當前剪裁區域內的任何地方繪制當前源。 ![Clipping](https://img.kancloud.cn/59/40/594047966f939ed31523f80232b7ae48_302x226.jpg) 圖：剪裁 ## 遮罩在將源應用于表面之前，先對其進行過濾。遮罩用作過濾器。遮罩確定在哪里應用源，在哪里不應用。遮罩的不透明部分允許復制源。透明零件不允許將源復制到表面。 ```py #!/usr/bin/python ''' ZetCode PyCairo tutorial This program demonstrates masking. author: Jan Bodnar website: zetcode.com last edited: August 2012 ''' from gi.repository import Gtk import cairo class Example(Gtk.Window): def __init__(self): super(Example, self).__init__() self.init_ui() self.load_image() def init_ui(self): darea = Gtk.DrawingArea() darea.connect("draw", self.on_draw) self.add(darea) self.set_title("Masking") self.resize(310, 100) self.set_position(Gtk.WindowPosition.CENTER) self.connect("delete-event", Gtk.main_quit) self.show_all() def load_image(self): self.ims = cairo.ImageSurface.create_from_png("omen.png") def on_draw(self, wid, cr): cr.mask_surface(self.ims, 0, 0); cr.fill() def main(): app = Example() Gtk.main() if __name__ == "__main__": main() ``` 在該示例中，遮罩確定在哪里繪畫和在哪里不繪畫。 ```py cr.mask_surface(self.ims, 0, 0); cr.fill() ``` 我們使用圖像作為遮罩，從而將其顯示在窗口上。 ![Masking](https://img.kancloud.cn/30/84/30847ad07cfe30dad565374a57e5c376_312x126.jpg) 圖：遮罩 ## 蒙蔽效果在此代碼示例中，我們將忽略圖像。這類似于我們使用卷簾所做的。 ```py #!/usr/bin/python ''' ZetCode PyCairo tutorial This program creates a blind down effect using masking operation. author: Jan Bodnar website: zetcode.com last edited: August 2012 ''' from gi.repository import Gtk, GLib import cairo import math class Example(Gtk.Window): def __init__(self): super(Example, self).__init__() self.init_ui() self.load_image() self.init_vars() def init_ui(self): self.darea = Gtk.DrawingArea() self.darea.connect("draw", self.on_draw) self.add(self.darea) GLib.timeout_add(35, self.on_timer) self.set_title("Blind down") self.resize(325, 250) self.set_position(Gtk.WindowPosition.CENTER) self.connect("delete-event", Gtk.main_quit) self.show_all() def load_image(self): self.image = cairo.ImageSurface.create_from_png("beckov.png") def init_vars(self): self.timer = True self.h = 0 self.iw = self.image.get_width() self.ih = self.image.get_height() self.ims = cairo.ImageSurface(cairo.FORMAT_ARGB32, self.iw, self.ih) def on_timer(self): if (not self.timer): return False self.darea.queue_draw() return True def on_draw(self, wid, cr): ic = cairo.Context(self.ims) ic.rectangle(0, 0, self.iw, self.h) ic.fill() self.h += 1 if (self.h == self.ih): self.timer = False cr.set_source_surface(self.image, 10, 10) cr.mask_surface(self.ims, 10, 10) def main(): app = Example() Gtk.main() if __name__ == "__main__": main() ``` 盲目效應背后的想法很簡單。圖像高度為 h 像素。我們繪制高度為 1px 的 0、1、2 ... 線。每個周期，圖像的一部分高 1px，直到整個圖像可見為止。 ```py def load_image(self): self.image = cairo.ImageSurface.create_from_png("beckov.png") ``` 在`load_image()`方法中，我們從 PNG 圖像創建圖像表面。 ```py def init_vars(self): self.timer = True self.h = 0 self.iw = self.image.get_width() self.ih = self.image.get_height() self.ims = cairo.ImageSurface(cairo.FORMAT_ARGB32, self.iw, self.ih) ``` 在`init_vars()`方法中，我們初始化一些變量。我們啟動`self.timer`和`self.h`變量。我們得到加載圖像的寬度和高度。然后我們創建一個空的圖像表面。它將用我們之前創建的圖像表面的像素線填充。 ```py ic = cairo.Context(self.ims) ``` 我們從空圖像源創建一個 cairo 上下文。 ```py ic.rectangle(0, 0, self.iw, self.h) ic.fill() ``` 我們在最初為空的圖像中繪制一個矩形。矩形每個周期將高出 1 像素。以這種方式創建的圖像稍后將用作遮罩。 ```py self.h += 1 ``` 要顯示的圖像高度增加一個單位。 ```py if (self.h == self.ih): self.timer = False ``` 當我們在 GTK 窗口上繪制整個圖像時，我們將停止`timer`方法。 ```py cr.set_source_surface(self.image, 10, 10) cr.mask_surface(self.ims, 10, 10) ``` 城堡的圖像被設置為繪畫的來源。 `mask_surface()`使用表面的 Alpha 通道作為遮罩來繪制電流源。本章介紹了 PyCairo 中的剪裁和遮罩。