如何在kivy中将小部件放置在图像上方并相对于图像？

Question

我目前正在为学生开发一个应用程序，该应用程序描述了各种实际实验。 该应用程序由几个 AccordionItems 组成。 其中一个问题出现了，我想在其中嵌入图像，该图像保持其纵横比但适应尽可能大。为了解释图像的某些部分，我想在有趣的设备/对象上放置半透明按钮，这些按钮在 on_release 以文本形式提供信息。

通过在 x 或 y 方向拉伸应用程序窗口以及不允许拉伸图像的事实，窗口上方和下方或右侧和左侧存在不属于实际图像的区域。

如何根据图像的当前大小缩放和定位按钮？

我尝试使用RelativeLayout，但按钮似乎面向整个窗口，我无法理解。 我也尝试过使用 id，但我不知道如何有效地使用它。

这里有一些当前代码：

class LaserApp(App):
    pass

if __name__ == '__main__':
    #Config.set('graphics', 'fullscreen', 'auto')
    Config.set('graphics', 'fullscreen', '0')
    Config.set('graphics', 'window_state', 'windowed')
    Config.write()
    LaserApp().run()

#:import ScrollEffect  kivy.effects.scroll.ScrollEffect
#:import Button kivy.uix.button.Button

Accordion:

    AccordionItem:
        title: 'titel1'
        collapse: False

    AccordionItem:    
        title: 'titel2'

    AccordionItem:
        title: 'relevant content'

        RelativeLayout:

            canvas:
            Image
                size_hint: 1, 1
                pos: self.pos
                size: self.texture_size
                source: 'background.png'

                canvas.after:
                RelativeLayout:

                    Button: #Button i want to align and resize depending on Image: / 'background.png'

    AccordionItem:
        title: 'titel4'

非常欢迎任何 cmets 和帮助。 非常感谢提前

P.S.：请原谅不好的描述。

Answer 1

对于你的问题，听起来你想要这样的东西？：

_____________
|   |   |   |
_____________
|   |   |   |
_____________
|   |   |   |
_____________

你必须创建多个按钮：

RelativeLayout:
    size_hint: 1,1
    pos: self.pos
    Button:
        background_color: 0,0,0,.25 #rgba only, this makes the button semi-transparent
        pos_hint: {'x': .66, 'y': 0}
        size_hint: .33, .33
        on_release: print/function
    Button:
        background_color: 0,0,0,.25
        pos_hint: {'x': .33, 'y': 0}
        size_hint: .33, .33
        on_release: print/function
    Button:
        background_color: 0,0,0,.25
        pos_hint: {'x': 0, 'y': 0}
        size_hint: .33, .33
        on_release: print/function
    Button:
        background_color: 0,0,0,.25
        pos_hint: {'x': .66, 'y': .33}
        size_hint: .33, .33
        on_release: print/function
    Button:
        background_color: 0,0,0,.25
        pos_hint: {'x': .33, 'y': .33}
        size_hint: .33, .33
        on_release: print/function
    Button:
        background_color: 0,0,0,.25
        pos_hint: {'x': 0, 'y': .33}
        size_hint: .33, .33
        on_release: print/function
    Button:
        background_color: 0,0,0,.25
        pos_hint: {'x': .66, 'y': .66}
        size_hint: .33, .33
        on_release: print/function
    Button:
        background_color: 0,0,0,.25
        pos_hint: {'x': .33, 'y': .66}
        size_hint: .33, .33
        on_release: print/function
    Button:
        background_color: 0,0,0,.25
        pos_hint: {'x': 0, 'y': .66}
        size_hint: .33, .33
        on_release: print/function

只要您使用size_hint: 1,1 和pos: self.pos 将布局附加到您的图像，这会将布局绑定到图像小部件的相同大小和位置。示例代码中的按钮应填充 1/9 布局大小的图块，因为 9 以 0.33 为增量设置，如果您想要更多，只需使用正确的 size_hint 和 pos_hint 值添加更多。如果RelativeLayout 是一个问题，请尝试使用FloatLayout 或BoxLayout，FloatLayout 类似于放置一个空白画布，您可以通过垂直或水平填充自己的子元素来填充此小部件，这取决于您如何设置orientation: .如果这没有完全回答您的问题或者您需要更多帮助，请告诉我。