用kivy學習製作簡易調色畫板app

michaelxguo發表於2021-08-17
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')

原始碼內所用到的圖片檔案，可以點選下載原始碼，在原始碼內找到專案所需的圖片檔案。

相關文章