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-自定義窗口部/

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