在 PyCairo 教程中的這個部分，我們將會繪制一些基本的元素。我們將繪制簡單的直線，應用填充和 stroke 操作，我們將會討論虛線，線帽和線的交合。

直線

直線是非?；镜南蛄繉ο?。為了繪制一條直線，我們使用兩個方法調用。一個是move_to()調用，我們需要把起點位置傳給它。另一個是line_to()，我們則需要把直線的終點傳給它。

#!/usr/bin/python ''' ZetCode PyCairo tutorialIn this program, we connect all mouse clicks with a line.author: Jan Bodnar website: zetcode.com last edited: August 2012 '''import gtk import cairoclass MouseButtons:LEFT_BUTTON = 1RIGHT_BUTTON = 3class MainWindow(gtk.Window):def __init__(self):super(self.__class__, self).__init__()self.init_ui()print "MainWindow: " + str(self)def init_ui(self):self.darea = gtk.DrawingArea()self.darea.connect("expose_event", self.expose)self.darea.set_events(gtk.gdk.BUTTON_PRESS_MASK | gtk.gdk.BUTTON_RELEASE_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.WIN_POS_CENTER)self.connect("delete-event", gtk.main_quit)self.show_all()def on_button_press(self, widget, event):if event.type == gtk.gdk.BUTTON_PRESS and event.button == MouseButtons.LEFT_BUTTON:self.coords.append([event.x, event.y])if event.type == gtk.gdk.BUTTON_PRESS and event.button == MouseButtons.RIGHT_BUTTON:self.darea.queue_draw()passdef expose(self, widget, event):self.context = widget.window.cairo_create()self.on_draw(300, self.context)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 main():window = MainWindow()gtk.main()if __name__ == "__main__":main()

在我們的例子中，我們用鼠標左鍵隨機的在窗口中點擊。每一次點擊的位置都會被存進一個列表。當我們在窗口中按下鼠標右鍵時，列表中每一個點都會與其他所有的點連接起來。通過這種方式，我們可以創(chuàng)建一些有趣的對象。再次點擊鼠標右鍵可以清空窗口，我們就可以創(chuàng)建另一個對象了。

class MouseButtons:LEFT_BUTTON = 1RIGHT_BUTTON = 3

GTK 文檔簡單的狀態(tài)標記，鼠標左鍵為數(shù)字1，鼠標右鍵為數(shù)字3。我們創(chuàng)建一個定制的類來為鼠標的鍵做標識。

self.darea.set_events(gtk.gdk.BUTTON_PRESS_MASK | gtk.gdk.BUTTON_RELEASE_MASK)

某些事件默認情況下是不打開的。鼠標按鈕按下事件即屬其中。然而，我們需要打開鼠標按鈕按下事件。

self.darea.connect("button-press-event", self.on_button_press)

在這個例子中，我們對鼠標按下事件作出反應。

cr.set_source_rgb(0, 0, 0)cr.set_line_width(0.5)

將用黑色墨水和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()

我們把列表中每一個點連接到其他的每一個點。stroke()調用繪制直線。

del self.coords[:]

最后，所有的坐標被刪除?，F(xiàn)在我們可以創(chuàng)建另一個對象了。

def on_button_press(self, widget, event):if event.type == gtk.gdk.BUTTON_PRESS and event.button == MouseButtons.LEFT_BUTTON:self.coords.append([event.x, event.y])

如果按下了鼠標左按鈕，我們會把它的x，y坐標添加到self.coords列表中去。

if event.type == gtk.gdk.BUTTON_PRESS and event.button == MouseButtons.RIGHT_BUTTON:self.darea.queue_draw()

按下鼠標右鍵時，我們調用queue_draw()方法，它將會渲染繪制區(qū)域。所有的點會連成線。

Figure: Lines

填充和stroke

Stroke操作繪制形狀的輪廓，而填充操作則填充形狀的內(nèi)部。

#!/usr/bin/python ''' ZetCode PyCairo tutorialThis code example draws a circle using the PyCairo libraryauthor: Jan Bodnar website: zetcode.com last edited: August 2012 '''import cairo import gtk import mathclass MainWindow(gtk.Window):def __init__(self):super(self.__class__, self).__init__()self.init_ui()def init_ui(self):self.darea = gtk.DrawingArea()self.darea.connect("expose_event", self.expose)self.add(self.darea)self.set_title("Fill & stroke")self.resize(230, 150)self.set_position(gtk.WIN_POS_CENTER)self.connect("delete-event", gtk.main_quit)self.show_all()def expose(self, widget, event):self.context = widget.window.cairo_create()self.on_draw(230, self.context)def on_draw(self, wid, cr):cr.set_line_width(9)cr.set_source_rgb(0.7, 0.2, 0.0)width, height = self.get_size()cr.translate(width/2, height/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():window = MainWindow()gtk.main()if __name__ == "__main__":main()

在我們的例子中，我們將畫一個圓圈，然后用一種顏色填充它。

import math

pi常量需要這個模塊，后面在繪制圓圈時會用到pi。

cr.set_line_width(9)cr.set_source_rgb(0.7, 0.2, 0.0)

我們用set_line_width()方法設置線的寬度。我們使用set_source_rgb()把source設為某種暗紅色。

width, height = self.get_size()

此處我們獲取窗口的寬度和高度。我們需要這些值來將圓圈放到窗口的中心位置。

cr.translate(width/2, height/2)cr.arc(0, 0, 50, 0, 2 * math.pi)cr.stroke_preserve()

通過translate()方法，我們將繪制的原點移動到窗口的中心位置。我們想要將我們的圓圈放在中心位置。arc()方法向cairo繪制上下文中添加一個新的圓圈的path。最后，stroke_preserve()方法繪制圓圈的輪廓。不像stroke()方法，它會保留形狀以用于后面的繪制。

cr.set_source_rgb(0.3, 0.4, 0.6)cr.fill()

我們換一種顏色來畫，使用fill()方法并用一種新的顏色來填充圓圈。

Figure: Fill & stroke

Pen dashes

每一條直線都可以用不同的pen dash來畫。一個pen dash定義了直線的style。dash模式由set_dash()方法指定。模式由一個浮點值組成的dash列表來描述。它們設置了dash模式的on和off部分。dash被stroke()方法用來創(chuàng)建一條直線。如果dashes的數(shù)量為0，則dashing是被關掉的。如果dashes的數(shù)量為1，則假設是一個對稱的模式，其中on和off部分交替出現(xiàn)，它們的大小由dashes中的那個值來指定。

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()

我們用三種不同類型的pen dashes畫了三條直線。

cr.set_dash([4.0, 21.0, 2.0])

我們定義了具有三個數(shù)字的模式。我們畫4個點，21個不畫，然后2個點畫。接下來是4個點不畫，21個點畫和2個點不畫。這個模式如此交替，直到直線的終點。

cr.set_dash([14.0, 6.0])

在這個模式中，我們總是讓14個點畫，6個不畫。

cr.set_dash([1.0])

我們在這兒創(chuàng)建了一個對稱的pen dash模式，交替的一個點畫，一個點不畫。

Figure: Pen dashes

Line caps

Line caps 是直線的終點。

• cairo.LINE_CAP_BUTT
• cairo.LINE_CAP_ROUND
• cairo.LINE_CAP_SQUARE

Cairo中有三種不同的line cap style。

Figure: Square, round and butt caps

相對于具有一個cairo.LINE_CAP_BUTT cap的直線，具有一個cairo.LINE_CAP_SQUARE cap的直線將有不一樣的大小。如果一條直線x單元寬，具有一個cairo.LINE_CAP_SQUARE cap的直線將會要大整整x個單元。開始處x/2個單元，結尾處x/2個單元。

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()

這個例子畫了三條具有不同的line caps的直線。它也通過畫三條額外的垂直方向的細線生動的演示了直線不同大小的影響。

cr.set_line_width(12)

我們的直線將是12個單元寬的。默認的直線寬度為2.

cr.set_line_cap(cairo.LINE_CAP_ROUND)cr.move_to(30, 90)cr.line_to(150, 90)cr.stroke()

此處我們畫了一條具有一個cairo.LINE_CAP_ROUND cap的水平直線。

cr.set_line_width(1.5)cr.move_to(30, 35)cr.line_to(30, 145)cr.stroke()

這是用于演示不同直線大小的影響的三條垂直直線之一。

Figure: Line caps

Line joins

直線可以用三種不同的聯(lián)合style來做聯(lián)合。

• cairo.LINE_JOIN_MITER
• cairo.LINE_JOIN_BEVEL
• cairo.LINE_JOIN_ROUND

Figure: Bevel, Round, Miter line joins

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()

在這個例子中，我們畫了三個具有不同的線聯(lián)合的厚矩形。

cr.set_line_width(14)

直線是14個單元寬的。

cr.rectangle(30, 30, 100, 100)cr.set_line_join(cairo.LINE_JOIN_MITER)cr.stroke()

此處我們畫了一個有著 cairo.LINE_JOIN_MITER聯(lián)合風格的矩形。

Figure: Line joins

PyCairo指南的這一章中，我們做了一些基本的繪圖。

原文

Done.

總結

以上是生活随笔為你收集整理的PyCairo 中的基本绘图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。