Kivy 中文教程 實例入門 簡易畫板 (Simple Paint App)：1. 自定義窗口部件 (widget)

1. 框架代碼

用 PyCharm 新建一個名爲 SimplePaintApp 的項目，而後新建一個名爲 simple_paint_app.py 的 Python 源文件，

在代碼編輯器中，輸入如下框架代碼

 1 from kivy.app import App
 2 from kivy.uix.widget import Widget
 3  
 4  
 5 class MyPaintWidget(Widget):
 6     pass
 7  
 8  
 9 class MyPaintApp(App):
10     def build(self):
11         return MyPaintWidget()
12  
13  
14 if __name__ == '__main__':
15     MyPaintApp().run()

運行上面的代碼，將顯示一個黑色背景的窗口

看起來很沒勁的樣子，不過你可不要小瞧這幾行代碼。這些就是簡易畫板的框架代碼，它就像是程序的骨架，後面咪博士將會帶領你們在這副骨架上添加各類新功能，逐步豐富和完善應用。

第 5 行 class MyPaintWidget(Widget): 從類 Widget 繼承，構造咱們的自定義窗口部件 MyPaintWidget。畫板的主要邏輯將在 MyPaintWidget 這個類中實現。如今咱們只寫了一個 pass (第 6 行)，至關因而佔位符，先讓整段代碼跑起來，具體的功能，咱們將在後面的教程中補充。

第 12 行 return MyPaintWidget() 在應用初始化時（調用 build  方法）建立並返回自定義窗口部件對象 MyPaintWidget

2. 添加交互

如今我們的自定義窗口部件啥也幹不了，接下來咱們要嘗試讓它可以響應用戶的動做。

代碼以下：

 1 from kivy.app import App
 2 from kivy.uix.widget import Widget
 3  
 4  
 5 class MyPaintWidget(Widget):
 6     def on_touch_down(self, touch):
 7         print(touch)
 8  
 9  
10 class MyPaintApp(App):
11     def build(self):
12         return MyPaintWidget()
13  
14  
15 if __name__ == '__main__':
16     MyPaintApp().run()

運行修改後的代碼，仍然顯示一個黑色的窗口，彷佛沒什麼變化。可是，當你用鼠標在窗口中點擊的時候，發如今 PyCharm 的控制檯有輸出，並且隨着點擊位置的不一樣，輸出的數字也會變化。

當用戶在窗口上用鼠標點擊的時候，將觸發 MyPaintWidget 的 on_touch_down 方法（第 6 行）。on_touch_down 方法的 touch 參數，包含了鼠標點擊時的位置信息。這裏，咱們還沒實現什麼有用的交互，只是把鼠標點擊的位置信息輸出到控制檯，即第 7 行代碼 print(touch)

【思考】

• 用本節的應用作實驗，思考 kivy 採用的座標系統是什麼樣的？（原點在哪裏？x 和 y 的方向如何？）

原文連接：http://www.ipaomi.com/2017/11/15/kivy-中文教程-實例入門-簡易畫板-simple-paint-app：1-自定義窗口部/