python - 将背景图像或颜色矩形设置为 GridLayout 中的小部件

Question

手头的问题是我有一个屏幕，我在 gridlayout 下创​​建了 4 个小部件。小部件一是一个自定义小部件，它有一个盒子布局，有 2 个图像和一个按钮。其他 3 个小部件是简单的按钮现在我想要第一个小部件有一个背景图像或彩色矩形，但图像正在位置 0,0 处绘制。我正在尝试使用 Canvas 指令创建矩形或边框图像，但似乎 gridlayout 将小部件位置显示为 0,0 ，因此它在 0,0 处创建了矩形。请参阅下面的代码:

有什么想法可以解决这个问题并在小部件 1 的边框处创建矩形吗？

from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen,FallOutTransition
from kivy.uix.image import Image
from kivy.uix.gridlayout import GridLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.core.window import Window
from kivy.graphics import BorderImage
from kivy.graphics import Color, Rectangle ,Line

#################     Images   ######################
S = Image(source='images/Sti.png')
L = 'images/spinnin.gif'
#################     Images   ######################

class CButtonW(BoxLayout):
    def __init__(self, **kwargs):
        print "init --> CButton self.pos is ",self.pos
        super(CButtonW, self).__init__(**kwargs)
        self.orientation = 'vertical'
        with self.canvas.before:
            Color(1, 1, 0, 1, mode='rgba')
            Rectangle(pos=self.pos,size=self.size)
            BorderImage(
                     border=(10, 10, 10, 10),
                    source='images/tex.png')

        self.add_widget(S)
        self.add_widget(Button(text="Button 1"))
        self.add_widget(Image(source=L))


class LevelScreen(Screen,GridLayout):
    def __init__(self, **kwargs):
        super(LevelScreen, self).__init__(**kwargs)
        with self.canvas:
            Line(points=(10, 10, 20, 30, 40, 50))
            Color(1, 0, 1, 1, mode='rgba')
            Rectangle(pos=self.pos, size=Window.size)

        self.layout = GridLayout(cols=3,spacing=1,padding=10)
        self.Button1 = CButtonW(id='1',text='Level 1')
        self.Button2 = Button(id='2',text='Level 2')
        self.Button3 = Button(id='3',text='Level 3')
        self.Button4 = Button(id='4',text='Level 4')
        self.layout.add_widget(self.Button1)
        self.layout.add_widget(self.Button2)
        self.layout.add_widget(self.Button3)
        self.layout.add_widget(self.Button4)

        LevelScreen.cols=3
        LevelScreen.add_widget(self,self.layout)
        print "position of 1st button is ",self.Button1.pos
        print "position of 2 button is ",self.Button2.pos

# App Class
class MyJBApp(App):
    def build(self):
        sm = ScreenManager(transition= FallOutTransition())
        sm.add_widget(LevelScreen(name='level'))
        return sm

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

Answer 1

您的 Canvas 指令是在 CButtonW 通过其布局定位之前绘制的，因此此时它仍处于默认位置 0, 0。

您可以通过添加代码来修复此问题，以便在小部件的位置或大小发生变化时重新定位指令。最简单的方法是首先使用 kv 语言，它会自动创建相关绑定(bind)，但您也可以绑定(bind)到 python 中的 pos 或 size，或者使用与其更改相关的 on_propertyname 事件。