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'

任何意见和帮助都非常欢迎。非常感谢

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在图像上附加了版式，就会将版式绑定到图像小部件的相同大小和位置。示例代码中的按钮应填充为Layout大小的1/9的图块，因为如果您需要更多，请以.33的增量设置9，只需添加更多正确的size_hint和pos_hint值即可。如果RelativeLayout是一个问题，请尝试使用FloatLayout或BoxLayout，FloatLayout类似于放置空白画布，并且您可以通过在垂直或水平方向上自行填充子级来填充该小部件，无论您认为适合还是BoxLayout函数，具体取决于您设置{{{1 }}。如果这不能完全回答您的问题，或者您需要更多帮助，请告诉我。

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

1 个答案: