Cario 繪圖 II · ZetCode 中文系列教程

# Cario 繪圖 II > 原文： [http://zetcode.com/gui/pygtk/drawingII/](http://zetcode.com/gui/pygtk/drawingII/) 在 PyGTK 編程教程的這一部分中，我們將繼續使用 Cairo 庫進行繪制。 ## 甜甜圈在下面的示例中，我們通過旋轉一堆橢圓來創建復雜的形狀。 `donut.py` ```py #!/usr/bin/python # ZetCode PyGTK tutorial # # This program creates a donut # with cairo library # # author: jan bodnar # website: zetcode.com # last edited: February 2009 import gtk import math class PyApp(gtk.Window): def __init__(self): super(PyApp, self).__init__() self.set_title("Donut") self.set_size_request(350, 250) self.set_position(gtk.WIN_POS_CENTER) self.connect("destroy", gtk.main_quit) darea = gtk.DrawingArea() darea.connect("expose-event", self.expose) self.add(darea) self.show_all() def expose(self, widget, event): cr = widget.window.cairo_create() cr.set_line_width(0.5) w = self.allocation.width h = self.allocation.height cr.translate(w/2, h/2) cr.arc(0, 0, 120, 0, 2*math.pi) cr.stroke() for i in range(36): cr.save() cr.rotate(i*math.pi/36) cr.scale(0.3, 1) cr.arc(0, 0, 120, 0, 2*math.pi) cr.restore() cr.stroke() PyApp() gtk.main() ``` 在此示例中，我們創建一個甜甜圈。形狀類似于曲奇，因此得名“甜甜圈”。 ```py cr.translate(w/2, h/2) cr.arc(0, 0, 120, 0, 2*math.pi) cr.stroke() ``` 剛開始時有一個橢圓。 ```py for i in range(36): cr.save() cr.rotate(i*math.pi/36) cr.scale(0.3, 1) cr.arc(0, 0, 120, 0, 2*math.pi) cr.restore() cr.stroke() ``` 旋轉幾圈后，有一個甜甜圈。我們使用`save()`和`restore()`方法將每個旋轉和縮放操作彼此隔離。 ![Donut](https://img.kancloud.cn/4c/6d/4c6d3217cf2290203977619af0cd3afc_358x278.jpg) 圖：多納圈 ## 漸變在計算機圖形學中，漸變是從淺到深或從一種顏色到另一種顏色的陰影的平滑混合。在 2D 繪圖程序和繪圖程序中，漸變用于創建彩色背景和特殊效果以及模擬燈光和陰影。（answers.com） `gradients.py` ```py #!/usr/bin/python # ZetCode PyGTK tutorial # # This program works with # gradients in cairo # # author: jan bodnar # website: zetcode.com # last edited: February 2009 import gtk import cairo class PyApp(gtk.Window): def __init__(self): super(PyApp, self).__init__() self.set_title("Gradients") self.set_size_request(340, 390) self.set_position(gtk.WIN_POS_CENTER) self.connect("destroy", gtk.main_quit) darea = gtk.DrawingArea() darea.connect("expose-event", self.expose) self.add(darea) self.show_all() def expose(self, widget, event): cr = widget.window.cairo_create() lg1 = cairo.LinearGradient(0.0, 0.0, 350.0, 350.0) count = 1 i = 0.1 while i < 1.0: if count % 2: lg1.add_color_stop_rgba(i, 0, 0, 0, 1) else: lg1.add_color_stop_rgba(i, 1, 0, 0, 1) i = i + 0.1 count = count + 1 cr.rectangle(20, 20, 300, 100) cr.set_source(lg1) cr.fill() lg2 = cairo.LinearGradient(0.0, 0.0, 350.0, 0) count = 1 i = 0.05 while i < 0.95: if count % 2: lg2.add_color_stop_rgba(i, 0, 0, 0, 1) else: lg2.add_color_stop_rgba(i, 0, 0, 1, 1) i = i + 0.025 count = count + 1 cr.rectangle(20, 140, 300, 100) cr.set_source(lg2) cr.fill() lg3 = cairo.LinearGradient(20.0, 260.0, 20.0, 360.0) lg3.add_color_stop_rgba(0.1, 0, 0, 0, 1) lg3.add_color_stop_rgba(0.5, 1, 1, 0, 1) lg3.add_color_stop_rgba(0.9, 0, 0, 0, 1) cr.rectangle(20, 260, 300, 100) cr.set_source(lg3) cr.fill() PyApp() gtk.main() ``` 在我們的示例中，我們繪制了三個具有三個不同漸變的矩形。 ```py lg1 = cairo.LinearGradient(0.0, 0.0, 350.0, 350.0) ``` 在這里，我們創建一個線性漸變圖案。參數指定直線，沿著該直線繪制漸變。在我們的情況下，這是一條垂直線。 ```py lg3 = cairo.LinearGradient(20.0, 260.0, 20.0, 360.0) lg3.add_color_stop_rgba(0.1, 0, 0, 0, 1) lg3.add_color_stop_rgba(0.5, 1, 1, 0, 1) lg3.add_color_stop_rgba(0.9, 0, 0, 0, 1) ``` 我們定義色標以產生漸變圖案。在這種情況下，漸變是黑色和黃色的混合。通過添加兩個黑色和一個黃色色標，我們創建了一個水平漸變圖案。這些停止實際上是什么意思？在我們的情況下，我們從黑色開始，該顏色將以大小的 1/10 停止。然后，我們開始逐漸涂成黃色，最終達到形狀的中心。黃色停在大小的 9/10，我們再次開始用黑色繪圖，直到結束。 ![Gradients](https://img.kancloud.cn/3b/c4/3bc44e891c0c342c2ff666df7992f360_348x418.jpg) 圖：漸變 ## 泡泡在以下示例中，我們創建一個粉撲效果。該示例將顯示一個不斷增長的居中文本，該文本將從某個點逐漸淡出。這是一個非常常見的效果，您經常可以在 Flash 動畫中看到它。 `puff.py` ```py #!/usr/bin/python # ZetCode PyGTK tutorial # # This program creates a puff # effect # # author: jan bodnar # website: zetcode.com # last edited: February 2009 import gtk import glib import cairo class PyApp(gtk.Window): def __init__(self): super(PyApp, self).__init__() self.set_title("Puff") self.resize(350, 200) self.set_position(gtk.WIN_POS_CENTER) self.connect("destroy", gtk.main_quit) self.darea = gtk.DrawingArea() self.darea.connect("expose-event", self.expose) self.add(self.darea) self.timer = True self.alpha = 1.0 self.size = 1.0 glib.timeout_add(14, self.on_timer) self.show_all() def on_timer(self): if not self.timer: return False self.darea.queue_draw() return True def expose(self, widget, event): cr = widget.window.cairo_create() w = self.allocation.width h = self.allocation.height cr.set_source_rgb(0.5, 0, 0) cr.paint() cr.select_font_face("Courier", cairo.FONT_SLANT_NORMAL, cairo.FONT_WEIGHT_BOLD) self.size = self.size + 0.8 if self.size > 20: self.alpha = self.alpha - 0.01 cr.set_font_size(self.size) cr.set_source_rgb(1, 1, 1) (x, y, width, height, dx, dy) = cr.text_extents("ZetCode") cr.move_to(w/2 - width/2, h/2) cr.text_path("ZetCode") cr.clip() cr.stroke() cr.paint_with_alpha(self.alpha) if self.alpha <= 0: self.timer = False PyApp() gtk.main() ``` 該示例在窗口上創建一個逐漸增長和褪色的文本。 ```py glib.timeout_add(14, self.on_timer) ``` 每隔 14 毫秒調用一次`on_timer()`方法。 ```py def on_timer(self): if not self.timer: return False self.darea.queue_draw() return True ``` 在`on_timer()`方法中，我們在繪圖區域上調用`queue_draw()`方法，該方法會觸發曝光信號。 ```py cr.set_source_rgb(0.5, 0, 0) cr.paint() ``` 我們將背景色設置為深紅色。 ```py self.size = self.size + 0.8 ``` 每個周期，字體大小將增加 0.8 個單位。 ```py if self.size > 20: self.alpha = self.alpha - 0.01 ``` 字體大小大于 20 后開始淡出。 ```py (x, y, width, height, dx, dy) = cr.text_extents("ZetCode") ``` 我們得到了文本指標。 ```py cr.move_to(w/2 - width/2, h/2) ``` 我們使用文本指標將文本放在窗口的中心。 ```py cr.text_path("ZetCode") cr.clip() ``` 我們獲取文本的路徑，并為其設置當前的片段區域。 ```py cr.stroke() cr.paint_with_alpha(self.alpha) ``` 我們繪制當前路徑并考慮 alpha 值。 ![Puff](https://img.kancloud.cn/48/e0/48e0a567931a59b7ad2126b9f683ae2c_350x200.jpg) 圖：粉撲 ## 反射在下一個示例中，我們顯示反射圖像。這種美麗的效果使人產生幻覺，好像圖像在水中被反射一樣。 `reflection.py` ```py #!/usr/bin/python # -*- coding: utf-8 -*- # ZetCode PyGTK tutorial # # This program creates an # image reflection # # author: Jan Bodnar # website: zetcode.com # last edited: April 2011 import gtk import cairo import sys class PyApp(gtk.Window): def __init__(self): super(PyApp, self).__init__() self.set_title("Reflection") self.resize(300, 350) self.set_position(gtk.WIN_POS_CENTER) self.connect("destroy", gtk.main_quit) darea = gtk.DrawingArea() darea.connect("expose-event", self.expose) self.add(darea) try: self.surface = cairo.ImageSurface.create_from_png("slanec.png") except Exception, e: print e.message sys.exit(1) self.imageWidth = self.surface.get_width() self.imageHeight = self.surface.get_height() self.gap = 40 self.border = 20 self.show_all() def expose(self, widget, event): cr = widget.window.cairo_create() w = self.allocation.width h = self.allocation.height lg = cairo.LinearGradient(w/2, 0, w/2, h*3) lg.add_color_stop_rgba(0, 0, 0, 0, 1) lg.add_color_stop_rgba(h, 0.2, 0.2, 0.2, 1) cr.set_source(lg) cr.paint() cr.set_source_surface(self.surface, self.border, self.border) cr.paint() alpha = 0.7 step = 1.0 / self.imageHeight cr.translate(0, 2 * self.imageHeight + self.gap) cr.scale(1, -1) i = 0 while(i < self.imageHeight): cr.rectangle(self.border, self.imageHeight-i, self.imageWidth, 1) i = i + 1 cr.save() cr.clip() cr.set_source_surface(self.surface, self.border, self.border) alpha = alpha - step cr.paint_with_alpha(alpha) cr.restore() PyApp() gtk.main() ``` 該示例顯示了一個反射的城堡。 ```py lg = cairo.LinearGradient(w/2, 0, w/2, h*3) lg.add_color_stop_rgba(0, 0, 0, 0, 1) lg.add_color_stop_rgba(h, 0.2, 0.2, 0.2, 1) cr.set_source(lg) cr.paint() ``` 背景充滿了漸變的油漆。涂料是從黑色到深灰色的平滑混合。 ```py cr.translate(0, 2 * self.imageHeight + self.gap) cr.scale(1, -1) ``` 此代碼翻轉圖像并將其轉換為原始圖像下方。平移操作是必需的，因為縮放操作會使圖像上下顛倒并向上平移圖像。要了解發生了什么，只需拍攝一張照片并將其放在桌子上即可。現在翻轉它。 ```py cr.rectangle(self.border, self.imageHeight-i, self.imageWidth, 1) i = i + 1 cr.save() cr.clip() cr.set_source_surface(self.surface, self.border, self.border) alpha = alpha - step cr.paint_with_alpha(alpha) cr.restore() ``` 這是最后一部分。我們使第二個圖像透明。但是透明度不是恒定的。圖像逐漸淡出。反射的圖像逐行繪制。 `clip()`方法將圖形限制為高度為 1 的矩形。`paint_with_alpha()`在繪制圖像表面的當前片段時會考慮透明度。 ![Reflection](https://img.kancloud.cn/5e/ed/5eed53f715898c4df74d7f4d3ba5557c_308x378.jpg) 圖：反射 ## 等待在此示例中，我們使用透明效果創建一個等待演示。我們將繪制 8 條線，這些線將逐漸消失，從而產生一條線在移動的錯覺。這種效果通常用于通知用戶，一項艱巨的任務正在幕后進行。一個示例是通過互聯網流式傳輸視頻。 `waiting.py` ```py #!/usr/bin/python # ZetCode PyGTK tutorial # # This program creates an # waiting effect # # author: jan bodnar # website: zetcode.com # last edited: February 2009 import gtk import glib import math import cairo trs = ( ( 0.0, 0.15, 0.30, 0.5, 0.65, 0.80, 0.9, 1.0 ), ( 1.0, 0.0, 0.15, 0.30, 0.5, 0.65, 0.8, 0.9 ), ( 0.9, 1.0, 0.0, 0.15, 0.3, 0.5, 0.65, 0.8 ), ( 0.8, 0.9, 1.0, 0.0, 0.15, 0.3, 0.5, 0.65 ), ( 0.65, 0.8, 0.9, 1.0, 0.0, 0.15, 0.3, 0.5 ), ( 0.5, 0.65, 0.8, 0.9, 1.0, 0.0, 0.15, 0.3 ), ( 0.3, 0.5, 0.65, 0.8, 0.9, 1.0, 0.0, 0.15 ), ( 0.15, 0.3, 0.5, 0.65, 0.8, 0.9, 1.0, 0.0, ) ) class PyApp(gtk.Window): def __init__(self): super(PyApp, self).__init__() self.set_title("Waiting") self.set_size_request(250, 150) self.set_position(gtk.WIN_POS_CENTER) self.connect("destroy", gtk.main_quit) self.darea = gtk.DrawingArea() self.darea.connect("expose-event", self.expose) self.add(self.darea) self.count = 0 glib.timeout_add(100, self.on_timer) self.show_all() def on_timer(self): self.count = self.count + 1 self.darea.queue_draw() return True def expose(self, widget, event): cr = widget.window.cairo_create() cr.set_line_width(3) cr.set_line_cap(cairo.LINE_CAP_ROUND) w = self.allocation.width h = self.allocation.height cr.translate(w/2, h/2) for i in range(8): cr.set_source_rgba(0, 0, 0, trs[self.count%8][i]) cr.move_to(0.0, -10.0) cr.line_to(0.0, -40.0) cr.rotate(math.pi/4) cr.stroke() PyApp() gtk.main() ``` 我們用八個不同的 alpha 值繪制八條線。 ```py glib.timeout_add(100, self.on_timer) ``` 我們使用計時器函數來創建動畫。 ```py trs = ( ( 0.0, 0.15, 0.30, 0.5, 0.65, 0.80, 0.9, 1.0 ), ... ) ``` 這是此演示中使用的透明度值的二維元組。有 8 行，每行一種狀態。 8 行中的每行將連續使用這些值。 ```py cr.set_line_width(3) cr.set_line_cap(cairo.LINE_CAP_ROUND) ``` 我們使線條更粗一些，以便更好地顯示它們。我們用圓帽畫線。他們看起來更好。 ```py cr.set_source_rgba(0, 0, 0, trs[self.count%8][i] ``` 在這里，我們定義了一條線的透明度值。 ```py cr.move_to(0.0, -10.0) cr.line_to(0.0, -40.0) cr.rotate(math.pi/4) cr.stroke() ``` 這些代碼行將繪制八行中的每行。 ![Waiting](https://img.kancloud.cn/a5/9f/a59f44bd4c83f2b2e87c5159f9ba9133_258x178.jpg) 圖：等待在 PyGTK 編程庫的這一章中，我們使用 Cairo 庫進行了一些更高級的繪制。