Kivy 中文教程实例入门简易画板 (Simple Paint App)：3. 随机颜色及清除按钮

女爷i 2022-06-05 09:56 273阅读 0赞

**1. 随机颜色**

通过前面的教程，咪博士已经带大家实现了画板的绘图功能。但是，现在画板只能画出黄色的图案，还十分单调，接下来咪博士就教大家，如何使用随机颜色，让画板变得五彩斑斓。

改进后的代码如下：

from random import random
     
    from kivy.app import App
    from kivy.uix.widget import Widget
    from kivy.graphics import Color, Ellipse, Line
     
     
    class MyPaintWidget(Widget):
        def on_touch_down(self, touch):
            color = (random(), random(), random())
            with self.canvas:
                Color(*color)
                d = 30.
                Ellipse(pos=(touch.x - d / 2, touch.y - d / 2), size=(d, d))
                touch.ud['line'] = Line(points=(touch.x, touch.y))
     
        def on_touch_move(self, touch):
            touch.ud['line'].points += [touch.x, touch.y]
     
     
    class MyPaintApp(App):
        def build(self):
            return MyPaintWidget()
     
     
    if __name__ == '__main__':
        MyPaintApp().run()

试试看。怎么样？是不是好看多了呢？

![kivy_simple_paint_app_random_color_dark.png][]

第 1 行 fromrandomimportrandom  我们导入了随机函数 random，它可以产生 \[0, 1) 之间的随机数

第 10 行 color=(random(),random(),random())  通过调用 random 函数，产生随机的 RGB 分量，存储在元组 color 中。后面（第 12 行），我们会用随机的 RGB 分量合成随机的颜色。注意，第 10 行的代码位于 on\_touch\_down 函数内。所以，用户每次点击鼠标的时候，都会生成新的随机 RGB 分量。

第12 行，用前面（第 10 行）产生的随机 RGB 分量生成随机颜色 color。函数 Color 需要授受 3 个参数（分别表示 RGB 的 3 个分量）。这里的Color(\*color)  表示将元组 color 解包，传递给函数 Color。由于元组 color 包含 3 个元素，所以它解包之后，就产生了 3 个随机数，而这 3 个随机数恰好可以做为 RGB 的 3 个分量传递给函数 Color。

不过，由于现在的颜色是完全随机的，程序有时候会产生一些比较暗的颜色，在黑色的画板背景上显示效果不是很好。我们可以进一步限制随机颜色的取值范围，让它只取一些比较鲜亮的颜色。

from random import random
     
    from kivy.app import App
    from kivy.uix.widget import Widget
    from kivy.graphics import Color, Ellipse, Line
     
     
    class MyPaintWidget(Widget):
        def on_touch_down(self, touch):
            color = (random(), 1, 1)
            with self.canvas:
                Color(*color, mode='hsv')
                d = 30.
                Ellipse(pos=(touch.x - d / 2, touch.y - d / 2), size=(d, d))
                touch.ud['line'] = Line(points=(touch.x, touch.y))
     
        def on_touch_move(self, touch):
            touch.ud['line'].points += [touch.x, touch.y]
     
     
    class MyPaintApp(App):
        def build(self):
            return MyPaintWidget()
     
     
    if __name__ == '__main__':
        MyPaintApp().run()

试试调整后的代码。哇！顿时鲜艳多了。

![kivy_simple_paint_app_random_color_light.png][]

第 10 行 color=(random(),1,1)  我们将随机颜色的后 2 个分量固定为 1，只让第 1 个分量随机变化。

第 12 行 Color(\*color,mode='hsv')  我们用 mode=’hsv’，指定颜色采用 HSV 模式，而不是先前默认的 RGB 模式。HSV 色彩模式的 3 个参数，分别代表 色调（Hue）、饱和度（Saturation）、明度（Value）。色调（Hue） 表示不同的色调（色彩的种类和名称）；饱和度（Saturation） 越高，则颜色越深、越艳；明度（Value）表示颜色的明度程度。由于采用了 HSV 色彩模式，第 10 行代码产生的随机元组 color 的含义也要相应发生变化了。color 中的第 1 参数是一个随机数，表示随机选择不同的色彩种类；第 2 个参数，固定为 1，表示取最大的饱和度，即将颜色调到最深、最艳；第 3 个参数，也固定取 1，表示将颜色调到最亮。这样改进之后，程序就只会生成明亮的随机颜色了。

**2. 清除按钮**

最后，我们要在画板上添加一个清除按钮，这样用户不必重启程序，就能将画板清空，并绘制新的图形。

完整代码如下：

from random import random
     
    from kivy.app import App
    from kivy.uix.widget import Widget
    from kivy.uix.button import Button
    from kivy.graphics import Color, Ellipse, Line
     
     
    class MyPaintWidget(Widget):
        def on_touch_down(self, touch):
            color = (random(), 1, 1)
            with self.canvas:
                Color(*color, mode='hsv')
                d = 30.
                Ellipse(pos=(touch.x - d / 2, touch.y - d / 2), size=(d, d))
                touch.ud['line'] = Line(points=(touch.x, touch.y))
     
        def on_touch_move(self, touch):
            touch.ud['line'].points += [touch.x, touch.y]
     
     
    class MyPaintApp(App):
        def build(self):
            parent = Widget()
            self.painter = MyPaintWidget()
            clearbtn = Button(text='Clear')
            clearbtn.bind(on_release=self.clear_canvas)
            parent.add_widget(self.painter)
            parent.add_widget(clearbtn)
            return parent
     
        def clear_canvas(self, obj):
            self.painter.canvas.clear()
     
     
    if __name__ == '__main__':
        MyPaintApp().run()

点击左下角的清除（Clear）按钮，可以将画板的内容清空。

![kivy_simple_paint_app_clear.png][]

第 5 行 fromkivy.uix.button importButton  导入 Button 类。窗体左下角的清除 (Clear) 按钮，便是 Button 类的实例。

第 24 行 parent=Widget() 创建一个空的窗口部件 (Widget)。后面我们会将自定义窗口部件（画板 MyPaintWidget）以及清除按钮（Button）添加到 parent 上。注意：Kivy 中进行窗口部件编排的标准做法是使用布局（ layout）。咪博士这里用的是比较便捷（但不规范）的方法，为的是让大家快速完成简易画板这个项目。关于 Kivy 中布局（layout）的使用，咪博士将在其他的教程中专门讲解。

第25 行 self.painter=MyPaintWidget() 创建自定义窗口部件对象，并赋值给变量 self.painter。因为，后面我们还要在别的函数中引用它。

第 26 行 clearbtn=Button(text='Clear') 创建清除按钮对象，将按钮的文字设置为 Clear，并赋值给变量 clearbtn。

第 27 行 clearbtn.bind(on\_release=self.clear\_canvas) 将清除按钮的 on\_release 事件绑定 (bind) 到 self.clear\_canvas 方法（第 32, 33 行）。这样，当用户按下并释放清除按钮时，将触发按钮的 on\_release 事件，然后调用该事件所绑定的 self.clear\_canvas 方法，执行清除画板的动作。

第 28, 29 行，将自定义窗口部件对象（self.painter）和清除按钮对象（clearbtn）添加到 parent 窗口部件中。

第 30 行 returnparent 返回 parent 窗口部件。注意，此时的 parent 已经包含了自定义窗口部件对象（self.painter）和清除按钮对象（clearbtn）。

第 32, 33 行，是用户按下并释放清除按钮时触发的回调函数。清除画板的功能正是通过第 33 行 self.painter.canvas.clear() 实现的。

好啦，到此为止 Kivy 简易画板的项目就全部完成啦。请关注咪博士后续更加精彩的 Kivy 教程。

原文链接： [http://www.ipaomi.com/2017/11/20/kivy-中文教程-实例入门-简易画板-simple-paint-app：3-随机颜色及清/][http_www.ipaomi.com_2017_11_20_kivy-_-_-_-simple-paint-app_3-]

[kivy_simple_paint_app_random_color_dark.png]: http://www.ipaomi.com/wp-content/uploads/2017/11/kivy_simple_paint_app_random_color_dark.png
[kivy_simple_paint_app_random_color_light.png]: http://www.ipaomi.com/wp-content/uploads/2017/11/kivy_simple_paint_app_random_color_light.png
[kivy_simple_paint_app_clear.png]: http://www.ipaomi.com/wp-content/uploads/2017/11/kivy_simple_paint_app_clear.png
[http_www.ipaomi.com_2017_11_20_kivy-_-_-_-simple-paint-app_3-]: http://www.ipaomi.com/2017/11/20/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%9a3-%e9%9a%8f%e6%9c%ba%e9%a2%9c%e8%89%b2%e5%8f%8a%e6%b8%85/