Kivy 中文教程实例入门简易画板 (Simple Paint App)：1. 自定义窗口部件 (widget)

墨蓝 2022-06-05 05:43 287阅读 0赞

**1. 框架代码**

用 PyCharm 新建一个名为 SimplePaintApp 的项目，然后新建一个名为 simple\_paint\_app.py 的 Python 源文件，

在代码编辑器中，输入以下框架代码

from kivy.app import App
    from kivy.uix.widget import Widget
     
     
    class MyPaintWidget(Widget):
        pass
     
     
    class MyPaintApp(App):
        def build(self):
            return MyPaintWidget()
     
     
    if __name__ == '__main__':
        MyPaintApp().run()

运行上面的代码，将显示一个黑色背景的窗口

![kivy_simple_paint_app_black.png][]

看起来很没劲的样子，不过你可不要小瞧这几行代码。这些就是简易画板的框架代码，它就像是程序的骨架，后面咪博士将会带领大家在这副骨架上添加各种新功能，逐步丰富和完善应用。

第 5 行 classMyPaintWidget(Widget): 从类 Widget 继承，构造我们的自定义窗口部件 MyPaintWidget。画板的主要逻辑将在 MyPaintWidget 这个类中实现。现在我们只写了一个 pass (第 6 行)，相当于是占位符，先让整段代码跑起来，具体的功能，我们将在后面的教程中补充。

第 12 行 returnMyPaintWidget() 在应用初始化时（调用 build  方法）创建并返回自定义窗口部件对象 MyPaintWidget

**2. 添加交互**

现在咱们的自定义窗口部件啥也干不了，接下来我们要尝试让它能够响应用户的动作。

代码如下：

from kivy.app import App
    from kivy.uix.widget import Widget
     
     
    class MyPaintWidget(Widget):
        def on_touch_down(self, touch):
            print(touch)
     
     
    class MyPaintApp(App):
        def build(self):
            return MyPaintWidget()
     
     
    if __name__ == '__main__':
        MyPaintApp().run()

运行修改后的代码，仍然显示一个黑色的窗口，似乎没什么变化。但是，当你用鼠标在窗口中点击的时候，发现在 PyCharm 的控制台有输出，而且随着点击位置的不同，输出的数字也会变化。

![kivy_simple_paint_app_print_touch.png][]

当用户在窗口上用鼠标点击的时候，将触发 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-自定义窗口部/][http_www.ipaomi.com_2017_11_15_kivy-_-_-_-simple-paint-app_1-]

[kivy_simple_paint_app_black.png]: http://www.ipaomi.com/wp-content/uploads/2017/11/kivy_simple_paint_app_black.png
[kivy_simple_paint_app_print_touch.png]: http://www.ipaomi.com/wp-content/uploads/2017/11/kivy_simple_paint_app_print_touch.png
[http_www.ipaomi.com_2017_11_15_kivy-_-_-_-simple-paint-app_1-]: http://www.ipaomi.com/2017/11/15/kivy-%e4%b8%ad%e6%96%87%e6%95%99%e7%a8%8b-%e5%ae%9e%e4%be%8b%e5%85%a5%e9%97%a8-%e7%ae%80%e6%98%93%e7%94%bb%e6%9d%bf-simple-paint-app%ef%bc%9a1-%e8%87%aa%e5%ae%9a%e4%b9%89%e7%aa%97%e5%8f%a3%e9%83%a8/