Kivy 中文教程 執行個體入門 簡易畫板 (Simple Paint App)：2. 實現繪圖功能

標籤：開頭   int   imp   .com   down   build   www.   起點   因此   

1. 理解 kivy 座標系統

上一節中，咪博士帶大家實現了畫板程式的基礎架構，以及一個基本的自訂視窗組件（widget）。在上一節的末尾，咪博士留了一道關於 kivy 座標系統的思考題給大家。通過點擊視窗的 4 個角落，觀察相應的控制台輸出，我們可以推斷出 kivy 的座標原點位於視窗的左下角，x 軸正方向為水平向右，y 軸正方向為豎直向上。這和我們中學數學中常見的平面直角座標系是一模一樣的。

2. 繪製圓點

瞭解了 kivy 的座標系統，本節咪博士將教大家實現簡易畫板的核心功能：繪圖。

重點需要修改的是 MyPaintWidget 的 on_touch_down 方法，同時還要在程式開頭（第 3 行）添加匯入顏色和畫圖的函數。修改後的代碼如下：

 1 from kivy.app import App 2 from kivy.uix.widget import Widget 3 from kivy.graphics import Color, Ellipse 4   5   6 class MyPaintWidget(Widget): 7     def on_touch_down(self, touch): 8         with self.canvas: 9             Color(1, 1, 0)10             d = 30.11             Ellipse(pos=(touch.x - d / 2, touch.y - d / 2), size=(d, d))12  13  14 class MyPaintApp(App):15     def build(self):16         return MyPaintWidget()17  18  19 if __name__ == ‘__main__‘:20     MyPaintApp().run()

運行程式，當用滑鼠左鍵在視窗上點擊的時候，程式會在滑鼠點擊的位置繪製出一個黃色的圓點。

第 8 行 with self.canvas: ，使用 with 語句進入自訂視窗組件 (MyPaintWidget) 的畫布 (canvas) 上下文。視窗組件 (widget) 的畫布 (canvas) 對應視窗組件在螢幕上的顯示地區，我們可以在上面繪製各種圖形。執行第 8 行代碼之後，後續的繪圖語句就會在這個畫布上繪製出各種圖形了。with 語句還能確保當我們退出畫布內容相關的時候，程式自動清理與畫布有關的內部狀態並釋放相應的資源。

第 9 行 Color(1, 1, 0) 將畫筆的顏色設定為黃色。Color 採用 RGB（紅、綠、藍）三原色來表示顏色，每個顏色分量的取值為 [0, 1] 之間。這裡我們混合紅色和綠色（第 1, 2 個參數為 1），剔除藍色（第 3 個參數為 0），根據三原色的原理，我們將得到黃色。設定好顏色之後，後續的繪圖都將採用這個顏色，直到你用 Color 函數再次改變顏色。這就好像你用畫筆蘸上黃色的顏料（調用 Color 函數），你隨後畫出的圖案就都是黃色的，一直到你再蘸其他的顏料（再次調用 Color 函數），改變畫筆的顏色。

第 10 行 d = 30.設定圓的直徑，後續的代碼將根據變數 d 的值來畫圓。如果，我們想改變圓的大小，只要修改變數 d 的值就可以了，這也是將圓的直徑儲存到變數中，給程式帶來的靈活性。

第 11 行 Ellipse(pos=(touch.x - d / 2, touch.y - d / 2), size=(d, d)) 調用Ellipse 函數在滑鼠點擊的位置，按照指定的直徑畫圓。Ellipse 函數中，圓的位置用圓的外切正方形來表示。其中，第 1 個參數 pos 表示外切正方形左下角的座標（x, y），第 2 個參數 size 表示外切正方形的大小（寬、高）。我們想要讓圓心落在滑鼠點擊的位置，因此，對應的外切正方形左下角座標為  (touch.x - d / 2, touch.y - d / 2)

3. 繪製線條

接著，我們要實現拖拽滑鼠繪製線條的功能。代碼如下：

 1 from kivy.app import App 2 from kivy.uix.widget import Widget 3 from kivy.graphics import Color, Ellipse, Line 4   5   6 class MyPaintWidget(Widget): 7     def on_touch_down(self, touch): 8         with self.canvas: 9             Color(1, 1, 0)10             d = 30.11             Ellipse(pos=(touch.x - d / 2, touch.y - d / 2), size=(d, d))12             touch.ud[‘line‘] = Line(points=(touch.x, touch.y))13  14     def on_touch_move(self, touch):15         touch.ud[‘line‘].points += [touch.x, touch.y]16  17  18 class MyPaintApp(App):19     def build(self):20         return MyPaintWidget()21  22  23 if __name__ == ‘__main__‘:24     MyPaintApp().run()

程式運行後的效果像下面這樣

第 3 行 from kivy.graphics import Color, Ellipse, Line我們匯入函數 Line 用於繪製線條。函數 Line 接受一個由一系列點的座標所構成的列表，然後依次在相鄰 2 點之間繪製線條。

第 12 行中的 touch.ud 是一個 Python 字典 (dict)，我們可以用它來儲存與 touch 事件相關的資料。整個第 12 行 touch.ud[‘line‘] = Line(points=(touch.x, touch.y)) 表示的意思是，當滑鼠按下時（觸發 on_touch_down 事件），以滑鼠點擊的位置 (touch.x, touch.y) 為起點繪製線條（調用 Line 函數），然後將該線條儲存到 touch.ud 字典中（對應的 key 值為 ‘line’）。由於，滑鼠點擊只能產生 1 個點，而 1 個點是沒有辦法繪製線條的，所以單純的滑鼠點擊是無法在螢幕上看到任何線條的。但是，這裡確實產生了一個線條，並且我們將它儲存到 touch.ud[‘line’] 中，隨後的代碼將繼續往這個線條中添加座標點，而一系列點的連線就可以顯示出來了。

第 14 行 def on_touch_move(self, touch):  添加了一個新的方法 on_touch_move。當使用者拖拽滑鼠時，將觸發該函數（執行該函數中的代碼）。一次滑鼠拖拽通常會連續多次觸發 on_touch_move 方法，相當於將一次移動拆解成很多個微小的移動，而每一次移動的位置則通過 touch 參數傳遞給 on_touch_move 方法。

第 15 行 touch.ud[‘line‘].points += [touch.x, touch.y] 將滑鼠拖拽產生的座標點，添加到儲存在 touch.ud[‘line’] 中的線條中。

原文連結：http://www.ipaomi.com/2017/11/16/kivy-中文教程-執行個體入門-簡易畫板-simple-paint-app：2-實現繪圖功能/

 

Kivy 中文教程 執行個體入門 簡易畫板 (Simple Paint App)：2. 實現繪圖功能