Kivy Canvas 在按钮顶部绘制的小部件

Question

Mark Vasilkov 书中的这个例子 - "Kivy Blueprints" 它可以工作，但是在绘制线条时，会在按钮上涂漆。请帮忙解决这个问题

...   
class CanvasWidget(Widget):  

def on_touch_down(self, touch):
    if Widget.on_touch_down(self, touch):
        return True
    print(touch.x, touch.y)
    with self.canvas:
        Color(*get_color_from_hex('#0080FF80'))
        Line(circle=(touch.x, touch.y, 2), width=2)
        touch.ud['current_line'] = Line(points=(touch.x, touch.y), width=2)     

def on_touch_move(self, touch):                               
    if 'current_line' in touch.ud:
        touch.ud['current_line'].points += (touch.x, touch.y)

def set_color(self, new_color):
    self.canvas.add(Color(*new_color))    

def clear_canvas(self):        
    self.canvas.clear()
    saved = self.children[:]
    self.clear_widgets()        
    for widget in saved:
        self.add_widget(widget)

class PaintApp(App):

def build(self):
    self.canvas_widget = CanvasWidget()
    self.canvas_widget.set_color(get_color_from_hex('#2980B9'))
    return self.canvas_widget

if __name__ == '__main__':
PaintApp().run()

Kv 文件上的按钮 'Clear' 和 'ColorButtons'。

<CanvasWidget>:
Button:  
on_release: root.clear_canvas()
text: 'Clear'
...
<ColorButton@RadioButton>:
on_release: app.canvas_widget.set_color(self.background_color)
...

Answer 1

使用canvas.before代替canvas:

...
def on_touch_down(self, touch):
    if Widget.on_touch_down(self, touch):
        return True
    print(touch.x, touch.y)
    with self.canvas.before:
        Color(*get_color_from_hex('#0080FF80'))
        Line(circle=(touch.x, touch.y, 2), width=2)
        touch.ud['current_line'] = Line(points=(touch.x, touch.y), width=2)
...

Kivy Canvas 在按钮顶部绘制的小部件

Kivy Canvas Widget draws on the top of buttons

python

kivy