制作一款简易的调色画板,要用到的知识:页面布局、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‘)
源码内所用到的图片文件,可以点击下载源码,在源码内找到项目所需的图片文件。