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

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

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

先建一个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学习制作简易调色画板app

上一篇:windows修改hosts


下一篇:Android——Animation(补间动画)