《Python+Kivy(App开发)从入门到实践》自学笔记：基本图形绘制——动手实践——画板——清屏

章节知识点总揽

3.5.5 清屏

        通过clear_widgets()方法清空窗口内所有子部件，再通过add_width()方法添加基础部件，即可完成清屏操作。

        实例：实现画板清屏

        在DrawCanvasWidget内新建一个clear_canvas()方法用于清除所有部件，在change_color()类中定义一个self.last_color属性，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 DrawCanvasWidget(Widget):
    def __init__(self,**kwargs):
        super().__init__(**kwargs)
        #设置默认颜色
        self.canvas.add(Color(rgb=[0,0,0]))
        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='Normal'):
        #线宽
        self.line_width = {'Thin':1,'Normal':2,'Thick':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([0, 0, 0, 1])  #为了避免在没有换色时清屏的错误
        self.change_color(self.last_color)

class FrameToggleButton(ToggleButton):
    #当前按钮添加边框
    def do_press(self):
        #点击改变状态
        if self.state == 'normal':
            ToggleButtonBehavior.do_press(self)
 
class PaintApp(App):
    def build(self):
        self.canvas_widget = DrawCanvasWidget()
        return self.canvas_widget
 
 
if __name__ == '__main__':
    PaintApp().run()

        在三个设置线宽的按钮旁设置一个清屏Button按钮，在添加一个on_release触发事件，最后在其内调用刚刚添加的方法。

#:import C kivy.utils.get_color_from_hex
 
<ButtomColorButton@ToggleButton>:
	group:'color'
	background_normal:''
	background_down:''
	border:(3,3,3,3)
	on_release:app.canvas_widget.change_color(self.background_color)

<LineWidthButton@ToggleButton>:
	group:'line_width'
	color:C('#2c3e50')
	backgroud_color:C('#ecf0f1')
	backgroud_normal:''
	backgroud_down:''
	border:(3,3,3,3)
	on_release:app.canvas_widget.change_line_width(self.text)


<BottomColorButton@FrameToggleButton>:
	group:'color'
	background_normal:'01.png'
	background_down:'02.png'
	border:(3,3,3,3)
	on_release:app.canvas_widget.change_color(self.background_color)

<LineWidthButton@FrameToggleButton>:
	group:'line_width'
	color:C('#2c3e50')
	background_color:C('#ecf0f1')
	background_normal:'01.png'
	background_down:'02.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:
		orientataion:'horizontal'
		padding:2
		spacing:2
		x:0
		top:root.top
		size_hint:None,None
		size:280,44

		LineWidthButton:
			text:'Thin'
		LineWidthButton:
			text:'Normal'
			state:'down'
		LineWidthButton:
			text:'Thick'
		Button:
			text:'Clear'
			on_release:root.clear_canvas()

<DrawCanvasWidget>:
	canvas.before:
		Color:
			rgba:[1,1,1,1]
		Rectangle:
			pos:self.pos
			size:self.size
 
	BoxLayout:
		id:bottom_box
		orientation:'horizontal'
		padding:2
		spacing:2
		size:root.width,40
 
		ButtomColorButton:
			background_color:C('#19caad')
			state:'down'
 
		ButtomColorButton:
			background_color:C('#8cc7d5')
 
		ButtomColorButton:
			background_color:C('#a0eee1')
 
		ButtomColorButton:
			background_color:C('#bee7e9')
 
		ButtomColorButton:
			background_color:C('#beedc7')
 
		ButtomColorButton:
			background_color:C('#d6d5b7')
 
		ButtomColorButton:
			background_color:C('#d1ba74')
 
		ButtomColorButton:
			background_color:C('#e6ceac')
 
		ButtomColorButton:
			background_color:C('#ecad9e')
 
		ButtomColorButton:
			background_color:C('#f4606c')
 
		ButtomColorButton:
			background_color:C('#3498db')
 
		ButtomColorButton:
			background_color:C('#1abc9c')
 
		ButtomColorButton:
			background_color:C('#2ecc71')
 
		ButtomColorButton:
			background_color:C('#f1c40f')
 
		ButtomColorButton:
			background_color:C('#e67e22')
 
		ButtomColorButton:
			background_color:C('#e74c3c')
 
		ButtomColorButton:
			background_color:C('#9b59b6')
 
		ButtomColorButton:
			background_color:C('#ecf0f1')
 
		ButtomColorButton:
			background_color:C('#95a5a6')
 
		ButtomColorButton:
			background_color:C('#000000')

main.py运行后，实现了清屏的功能。结果如下图：

上一篇：基本图形绘制——动手实践——画板——按钮边框

下一篇：简单UX部件——Button按钮