Kivy - 在文本周围绘制矩形

Posted 2023-04-14

【中文标题】Kivy - 在文本周围绘制矩形

【英文标题】：Kivy - Draw Rectangle Around Text

【发布时间】：2022-01-09 03:03:18

【问题描述】：

我是 Kivy 的新手，正在尝试为项目制作 UI。我正在尝试了解如何在不同的布局中调整所有内容的大小。

我遇到了一个问题，我在一个盒子布局中并排放置了两个标签（嵌套在另一个盒子布局中）。我希望第二个标签仅在文本后面绘制一个矩形。我可以到达那里的 90%，但我在定位文本后面的矩形时遇到了麻烦，因为没有像“self.texture_size”那样的“self.texture_pos”。

如何以标签字符串的大小和位置动态绘制矩形，或者我这样做是一种非常愚蠢的方式？

我的 .KV，对于时髦的颜色感到抱歉，正如我所说，我试图了解所有内容的定位方式：

#:kivy 1.8.0

BoxLayout:
    size: root.size
    pos: root.pos
    id: foo_bar
    orientation: 'vertical'

    canvas.before:
        Color:
            rgb: .6, .6, .6
        Rectangle:
            size: self.size
        
    StatusBarWidget:
    ProcessValWidget:
    ProcessSliderWidget:
    StartStopWidget:

<startstopwidget>:              
    BoxLayout:
        orientation: 'horizontal'
                
        Label:                      
            font_size: 70
            center_x: root.width / 4
            top: root.top - 50
            text: "2"
            canvas.before:
                Color:
                    rgba: 0,1,0,1
                Rectangle:
                    size: self.size
                    pos: self.pos           
        Label:
            font_size: 70
            center_x: root.width * 3 / 4
            top: root.top - 50
            text: "3"
            canvas.before:
                Color:
                    rgba: 0,0,1,1
                Rectangle:
                    size: self.size 
                    pos: self.pos
            
<processvalwidget>:             
    BoxLayout:
        orientation: 'horizontal'
                
        Label:
            id: lbl_pval
            font_size: 50
            text: "Pressure:"
            text_size: self.size
            halign: 'right'
            valign: 'middle'
            canvas.before:
                Color:
                    rgba: 1,0,0,1
                Rectangle:
                    size: self.size 
                    pos: self.pos
        Label:
            id: val_pval
            font_size: 50
            text: "100 PSI"
            canvas.before:
                Color:
                    rgba: 0,1,0,1
                Rectangle:
                    size: self.texture_size
                    pos: self.pos
                    
<processsliderwidget>:              
    BoxLayout:
        orientation: 'vertical'
                
        Slider:
            id: slider
            min: 0
            max: 100
            step: 1
            orientation: 'horizontal'
            
        Label:
            text: str(slider.value)

<statusbarwidget>:
    size_hint_y: None
    height: 50
    canvas.before:
        Color:
            rgba: 0,0,0,1
        Rectangle:
            size: self.size 
            pos: self.pos
    Label:
        text: "STATUS BAR"
        text_size: self.size
        size_hint_x: None
        halign: 'left'
        valign: 'middle'
        padding_x: 5

【参考方案1】：

您可以使用texture_size调整Rectangle的位置：

Label:
    font_size: 70
    center_x: root.width * 3 / 4
    top: root.top - 50
    text: "3"
    canvas.before:
        Color:
            rgba: 0,0,1,1
        Rectangle:
            size: self.texture_size
            pos: self.center_x - self.texture_size[0]/2, self.center_y - self.texture_size[1]/2