製作一款簡易的調色畫板，要用到的知識：頁面佈局、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')
原始碼內所用到的圖片檔案，可以點選下載原始碼，在原始碼內找到專案所需的圖片檔案。