# PyCairo 中的基本繪圖 > 原文： [https://zetcode.com/gfx/pycairo/basicdrawing/](https://zetcode.com/gfx/pycairo/basicdrawing/) 在 PyCairo 教程的這一部分中，我們繪制了一些基本圖元。 我們使用填充和描邊操作，筆劃線，線帽和線連接。 ## 直線 線是非常基本的矢量對象。 要畫一條線，我們使用兩個方法調用。 通過`move_to()`調用指定起點。 線的終點通過`line_to()`調用指定。 `lines.py` ```py #!/usr/bin/python ''' ZetCode PyCairo tutorial In this program, we connect all mouse clicks with a line. Author: Jan Bodnar Website: zetcode.com Last edited: April 2016 ''' from gi.repository import Gtk, Gdk import cairo class MouseButtons: LEFT_BUTTON = 1 RIGHT_BUTTON = 3 class Example(Gtk.Window): def __init__(self): super(Example, self).__init__() self.init_ui() def init_ui(self): self.darea = Gtk.DrawingArea() self.darea.connect("draw", self.on_draw) self.darea.set_events(Gdk.EventMask.BUTTON_PRESS_MASK) self.add(self.darea) self.coords = [] self.darea.connect("button-press-event", self.on_button_press) self.set_title("Lines") self.resize(300, 200) self.set_position(Gtk.WindowPosition.CENTER) self.connect("delete-event", Gtk.main_quit) self.show_all() def on_draw(self, wid, cr): cr.set_source_rgb(0, 0, 0) cr.set_line_width(0.5) for i in self.coords: for j in self.coords: cr.move_to(i[0], i[1]) cr.line_to(j[0], j[1]) cr.stroke() del self.coords[:] def on_button_press(self, w, e): if e.type == Gdk.EventType.BUTTON_PRESS \ and e.button == MouseButtons.LEFT_BUTTON: self.coords.append([e.x, e.y]) if e.type == Gdk.EventType.BUTTON_PRESS \ and e.button == MouseButtons.RIGHT_BUTTON: self.darea.queue_draw() def main(): app = Example() Gtk.main() if __name__ == "__main__": main() ``` 在我們的示例中，我們用鼠標左鍵隨機單擊窗口。 每次點擊都存儲在一個列表中。 當我們右鍵單擊窗口時，所有點都與列表中的每個其他點相連。 右鍵單擊將清除窗口。 ```py class MouseButtons: LEFT_BUTTON = 1 RIGHT_BUTTON = 3 ``` GTK 文檔僅聲明鼠標左鍵的編號為 1，鼠標右鍵的編號為 3。我們創建了一個自定義類，其中包含一些鼠標鍵的標識符。 ```py self.darea.set_events(Gdk.EventMask.BUTTON_PRESS_MASK) ``` 默認情況下，某些事件未啟用。 鼠標按下事件就在其中。 因此，我們需要使用`set_event()`方法啟用鼠標按下事件。 ```py self.darea.connect("button-press-event", self.on_button_press) ``` 在此代碼示例中，我們對鼠標按下事件做出反應。 ```py cr.set_source_rgb(0, 0, 0) cr.set_line_width(0.5) ``` 線條以黑色墨水繪制，寬度為 0.5 點。 ```py for i in self.coords: for j in self.coords: cr.move_to(i[0], i[1]) cr.line_to(j[0], j[1]) cr.stroke() ``` 我們將列表中的每個點連接到其他每個點。 `stroke()`調用畫線。 ```py del self.coords[:] ``` 最后，將刪除所有坐標。 現在，我們可以創建另一個對象。 ```py def on_button_press(self, w, e): if e.type == Gdk.EventType.BUTTON_PRESS \ and e.button == MouseButtons.LEFT_BUTTON: self.coords.append([e.x, e.y]) ... ``` 如果按下鼠標左鍵，我們會將其 x 和 y 坐標添加到`self.coords`列表中。 ```py if e.type == Gdk.EventType.BUTTON_PRESS \ and e.button == MouseButtons.RIGHT_BUTTON: self.darea.queue_draw() ``` 在按下鼠標右鍵的情況下，我們調用`queue_draw()`方法來重繪繪圖區域。 所有的點都用線連接。  圖：直線 ## 填充和描邊 描邊操作繪制形狀的輪廓，填充操作填充形狀的內部。 `fillstroke.py` ```py #!/usr/bin/python ''' ZetCode PyCairo tutorial This code example draws a circle using the PyCairo library. Author: Jan Bodnar Website: zetcode.com Last edited: April 2016 ''' from gi.repository import Gtk import cairo import math class Example(Gtk.Window): def __init__(self): super(Example, self).__init__() self.init_ui() def init_ui(self): darea = Gtk.DrawingArea() darea.connect("draw", self.on_draw) self.add(darea) self.set_title("Fill & stroke") self.resize(230, 150) self.set_position(Gtk.WindowPosition.CENTER) self.connect("delete-event", Gtk.main_quit) self.show_all() def on_draw(self, wid, cr): cr.set_line_width(9) cr.set_source_rgb(0.7, 0.2, 0.0) w, h = self.get_size() cr.translate(w/2, h/2) cr.arc(0, 0, 50, 0, 2*math.pi) cr.stroke_preserve() cr.set_source_rgb(0.3, 0.4, 0.6) cr.fill() def main(): app = Example() Gtk.main() if __name__ == "__main__": main() ``` 在示例中，我們繪制了一個圓圈，并用純色填充。 ```py import math ``` 用于繪制圓的`pi`常數需要此模塊。 ```py cr.set_line_width(9) cr.set_source_rgb(0.7, 0.2, 0.0) ``` 我們使用`set_line_width()`方法設置線寬。 我們使用`set_source_rgb()`方法將光源設置為深紅色。 ```py w, h = self.get_size() ``` 在這里，我們獲得了窗口的寬度和高度。 我們需要這些值使圓在窗口上居中。 ```py cr.translate(w/2, h/2) cr.arc(0, 0, 50, 0, 2*math.pi) cr.stroke_preserve() ``` 使用`translate()`方法，我們將圖形原點移動到窗口的中心。 我們希望我們的圈子居中。 `arc()`方法向 Cairo 圖形上下文添加了新的圓形路徑。 最后，`stroke_preserve()`方法繪制圓的輪廓。 與`stroke()`方法不同，它還保留了形狀以供以后繪制。 ```py cr.set_source_rgb(0.3, 0.4, 0.6) cr.fill() ``` 我們使用`fill()`方法更改繪制顏色，并用新顏色填充圓。  圖：填充和描邊 ## 筆劃線 每條線可以用不同的筆劃線繪制。 筆筆劃線定義線條的樣式。 筆劃線由`set_dash()`方法指定。 該模式由筆劃線列表設置，筆劃線列表是浮點值的列表。 他們設置筆劃線圖案的開和關部分。 `stroke()`方法使用筆劃線創建一條線。 如果筆劃線為 0，則禁用筆劃線。 如果筆劃線的數量為 1，則假定使用對稱模式，其中交替的開和關部分由筆劃線中的單個值指定。 ```py def on_draw(self, wid, cr): cr.set_source_rgba(0, 0, 0, 1) cr.set_line_width(2) cr.set_dash([4.0, 21.0, 2.0]) cr.move_to(40, 30) cr.line_to(250, 30) cr.stroke() cr.set_dash([14.0, 6.0]) cr.move_to(40, 50) cr.line_to(250, 50) cr.stroke() cr.set_dash([1.0]) cr.move_to(40, 70) cr.line_to(250, 70) cr.stroke() ``` 我們用三個不同的筆劃線畫了三條線。 ```py cr.set_dash([4.0, 21.0, 2.0]) ``` 我們有三個數字的模式。 我們繪制了 4 個點，未繪制 21 個，繪制了 2 個點，然后繪制了 4 個點，繪制了 21 個點。 和 2 未繪制。 該模式輪流直到行尾。 ```py cr.set_dash([14.0, 6.0]) ``` 在這種模式下，我們總是繪制 14 點，未繪制 6 點。 ```py cr.set_dash([1.0]) ``` 在這里，我們創建了一個對稱圖案的筆劃線，該圖案交替出現單個接通和斷開點。  圖：筆劃線 ## 線帽 線帽是線的端點。 * `Cairo.LINE_CAP_BUTT` * `Cairo.LINE_CAP_ROUND` * `Cairo.LINE_CAP_SQUARE` Cairo 有三種不同的線帽樣式。  圖：正方形，圓和端帽 帶有`cairo.LINE_CAP_SQUARE`帽的線的大小與帶有`cairo.LINE_CAP_BUTT`帽的線的大小不同。 如果一行的寬度是 x 單位，則帶`cairo.LINE_CAP_SQUARE`上限的行的大小將恰好是 x 單位； 開頭`x / 2`個單位，結尾`x / 2`個單位。 ```py def on_draw(self, wid, cr): cr.set_source_rgba(0, 0, 0, 1) cr.set_line_width(12) cr.set_line_cap(cairo.LINE_CAP_BUTT) cr.move_to(30, 50) cr.line_to(150, 50) cr.stroke() cr.set_line_cap(cairo.LINE_CAP_ROUND) cr.move_to(30, 90) cr.line_to(150, 90) cr.stroke() cr.set_line_cap(cairo.LINE_CAP_SQUARE) cr.move_to(30, 130) cr.line_to(150, 130) cr.stroke() cr.set_line_width(1.5) cr.move_to(30, 35) cr.line_to(30, 145) cr.stroke() cr.move_to(150, 35) cr.line_to(150, 145) cr.stroke() cr.move_to(155, 35) cr.line_to(155, 145) cr.stroke() ``` 該示例繪制具有三個不同線帽的三條線。 通過繪制三條額外的細垂直線，它還將以圖形方式顯示線的大小差異。 ```py cr.set_line_width(12) ``` 我們的生產線將是 12 個單位寬。 默認線寬為 2。 ```py cr.set_line_cap(cairo.LINE_CAP_ROUND) cr.move_to(30, 90) cr.line_to(150, 90) cr.stroke() ``` 在這里，我們用`cairo.LINE_CAP_ROUND`帽畫一條水平線。 ```py cr.set_line_width(1.5) cr.move_to(30, 35) cr.line_to(30, 145) cr.stroke() ``` 這是用來說明大小差異的三條垂直線之一。  圖：直線的端帽 ## 線連接 可以使用三種不同的連接樣式來連接線。 * `Cairo.LINE_JOIN_MITER` * `Cairo.LINE_JOIN_BEVEL` * `Cairo.LINE_JOIN_ROUND`  圖：斜角，圓角，斜接線連接 ```py def on_draw(self, wid, cr): cr.set_line_width(14) cr.rectangle(30, 30, 100, 100) cr.set_line_join(cairo.LINE_JOIN_MITER) cr.stroke() cr.rectangle(160, 30, 100, 100) cr.set_line_join(cairo.LINE_JOIN_BEVEL) cr.stroke() cr.rectangle(100, 160, 100, 100) cr.set_line_join(cairo.LINE_JOIN_ROUND) cr.stroke() ``` 在此示例中，我們繪制了三個具有各種線連接的粗矩形。 ```py cr.set_line_width(14) ``` 線寬為 14 個單位。 ```py cr.rectangle(30, 30, 100, 100) cr.set_line_join(cairo.LINE_JOIN_MITER) cr.stroke() ``` 在這里，我們繪制一個具有`cairo.LINE_JOIN_MITER`連接樣式的矩形。  圖：直線連接 ## 貝塞爾曲線 貝塞爾曲線是由數學公式定義的曲線。 繪制曲線的數學方法由 PierreBézier 在 1960 年代后期創建，用于雷諾的汽車制造。 ```py curve_to(x1, y1, x2, y2, x3, y3) ``` `curve_to()`方法將三次貝塞爾曲線樣條添加到路徑。 參數為第一控制點的 x 和 y 坐標，第二控制點的 x 和 y 坐標以及曲線末端的 x 和 y 坐標。 ```py def on_draw(self, wid, cr): cr.move_to(20, 40) cr.curve_to(320, 200, 330, 110, 450, 40) cr.stroke() ``` 在此示例中，使用`curve_to()`方法繪制了貝塞爾曲線。  圖：貝塞爾曲線 在 PyCairo 教程的這一章中，我們做了一些基本的繪制。