用kivy学习制作简易调色画板app

制作一款简易的调色画板，要用到的知识：页面布局、ToggleButton、ToggleButtonBehavior、get_color_from_hex(兼容十六进制编码颜色)；功能上要可以选择颜色，选择画笔线宽，可以清除画板。具体实现效果如下：

先建一个main.py文件，内容代码如下

from kivy.app import App
from kivy.graphics import Line,Color   #引入绘图
from kivy.uix.widget import Widget     #引入控件
from kivy.utils import get_color_from_hex   #兼容十六进制颜色
from kivy.uix.behaviors import ToggleButtonBehavior  #引入按钮开关行为
from kivy.uix.togglebutton import ToggleButton   #引入开关按钮
 
class FrameToggleButton(ToggleButton):
    #当前按钮添加边框
    def do_press(self):
        if self.state=='一般':
            ToggleButtonBehavior.do_press(self)
 
class DrawCanvasWidget(Widget):    #布局类
    def __init__(self,**kwargs):
        super(DrawCanvasWidget, self).__init__(**kwargs)
        #设置默认颜色
        self.change_color(get_color_from_hex('#19caad'))
        self.line_width=2
 
 
    def on_touch_down(self, touch):
        #触摸显示轨迹
        if Widget.on_touch_down(self,touch):
            return
        with self.canvas:
            touch.ud['current_line']=Line(points=(touch.x,touch.y),width=self.line_width)
 
    def on_touch_move(self, touch):
        #连线画线
        if 'current_line' in touch.ud:
            touch.ud['current_line'].points+=(touch.x,touch.y)
 
 
    def change_color(self,new_color):
        #调色选择画笔颜色
        self.last_color=new_color
        self.canvas.add(Color(*new_color))
 
 
    def change_line_width(self,line_width='一般'):
        #选择画笔线宽
        self.line_width={'较细':1,'一般':2,'较粗':4}[line_width]
 
    def clear_canvas(self):
        #清空画板
        saved=self.children[:]
        self.clear_widgets()
        self.canvas.clear()
        for widget in saved:
            self.add_widget(widget)
        self.change_color(self.last_color)
 
 
class PaintApp(App):  #继承App类
    #实现App类的build()方法（继承自App类）
    def build(self):
        self.canvas_widget=DrawCanvasWidget()
        return self.canvas_widget         #返回根控件
 
if __name__=='__main__':
    PaintApp().run()

再建一个paint.kv文件，内容代码如下：

#:import C kivy.utils.get_color_from_hex
#引入颜色转换16进制编码颜色的方法
 
<BottomColorButton@FrameToggleButton>:
    group:'color'
    background_normal:'images/radio_background_normal.png'
    background_down:'images/radio_background_down.png'
    border:(3,3,3,3)
    on_release:app.canvas_widget.change_color(self.background_color) #触发事件
 
<BottomClearButton@FrameToggleButton>:
#    group:'color'
    background_normal:''
    background_down:''
    border:(3,3,3,3)
    on_release:app.canvas_widget.clear_canvas() #触发事件
 
<LineWidthButton@FrameToggleButton>:
    group:'line_width'
    color:C('#2c3e50')   #文字颜色
    background_color:C('#ecf0f1')   #背景颜色
    background_normal:'images/radio_background_normal.png'
    background_down:'images/radio_background_down.png'
    border:(3,3,3,3)
    on_release:app.canvas_widget.change_line_width(self.text) #触发事件
 
<DrawCanvasWidget>:
    canvas.before:
        Color:
            rgba:[1,1,1,1]
        Rectangle:
            pos:self.pos
            size:self.size
 
    BoxLayout:
        orientation:'horizontal'
        padding:2
        spacing:2
        x:0
        top:root.top
        size_hint:None,None
        size:280,44
 
        LineWidthButton:
            text:'较细'
        LineWidthButton:
            text:'一般'
            state:'down'
        LineWidthButton:
            text:'较粗'
 
        BottomClearButton:
            font_size:15
            bold:5
            text:'清除画板'
            background_color:1,0,0,1
#            on_release:root.clear_canvas()   #触发事件
 
 
 
    BoxLayout:    #添加一个布局
        id:bottom_box    #添加ID属性
        orientation:'horizontal'  #指定布局方向
        padding:2   #设置间距
        spacing:2   #设置间距
        size:root.width,40   #设置大小
        BottomColorButton:
            background_color:C('#19caad')
            state:'down'
        BottomColorButton:
            background_color:C('#8cc7b5')
        BottomColorButton:
            background_color:C('#a0ee1')
        BottomColorButton:
            background_color:C('#bee7e9')
        BottomColorButton:
            background_color:C('#beedc7')
        BottomColorButton:
            background_color:C('#d6d5b7')
        BottomColorButton:
            background_color:C('#d1ba74')
        BottomColorButton:
            background_color:C('#e6ceac')
        BottomColorButton:
            background_color:C('#ecad9e')
        BottomColorButton:
            background_color:C('#f4606c')
        BottomColorButton:
            background_color:C('#3498db')
        BottomColorButton:
            background_color:C('#1abc9c')
        BottomColorButton:
            background_color:C('#2ecc71')
        BottomColorButton:
            background_color:C('#f1c40f')
        BottomColorButton:
            background_color:C('#e67e22')
        BottomColorButton:
            background_color:C('#e74c3c')
        BottomColorButton:
            background_color:C('#9b59b6')
        BottomColorButton:
            background_color:C('#ecf0f1')
        BottomColorButton:
            background_color:C('#95a5a6')
        BottomColorButton:
            background_color:C('#000000')
        BottomColorButton:
            background_color:C('#f4606c')

源码内所用到的图片文件，可以点击下载源码，在源码内找到项目所需的图片文件。

因有同学问到我的kivy学习资料里支持中文的方法是怎么解决的，我将解决中文的方法链接贴在这里，大家去照着做就可以了，很简单点击这个链接进入：kivy全局中文支持最简单的解决方法。