Kivy如何在Label文本后方动态绘制匹配尺寸位置的背景矩形
你的实现思路没有问题,Kivy确实没有内置texture_pos属性,只需要结合Label的对齐规则手动计算文本在控件内部的偏移量即可实现背景矩形的精准定位。
核心计算逻辑
Label的文本默认水平居中、垂直居中,因此文本的左上角位置可以通过如下公式计算:
- 水平坐标:
self.x + (self.width - self.texture_size[0]) / 2 - 垂直坐标:
self.y + (self.height - self.texture_size[1]) / 2
如果你修改过Label的halign/valign属性,调整对应偏移规则即可:
- 水平左对齐:x坐标直接取
self.x - 水平右对齐:x坐标取
self.x + self.width - self.texture_size[0] - 垂直顶部对齐:y坐标取
self.y + self.height - self.texture_size[1] - 垂直底部对齐:y坐标直接取
self.y
修改后的KV代码示例
你只需要调整val_pval Label的canvas部分即可:
<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 # 替换原来的self.pos为计算后的位置 pos: (self.x + (self.width - self.texture_size[0])/2, self.y + (self.height - self.texture_size[1])/2)
更简化的替代方案
如果你的布局不需要Label撑满父布局分配的宽度,直接让Label自身尺寸自适应文本大小即可,不需要手动计算位置:
Label: id: val_pval font_size: 50 text: "100 PSI" size_hint_x: None width: self.texture_size[0] # 宽度和文本一致 canvas.before: Color: rgba: 0,1,0,1 Rectangle: size: self.size pos: self.pos
上述两种方案都支持文本动态变化,Kivy会自动绑定属性更新,背景矩形会和文本同步调整大小、位置。
内容的提问来源于stack exchange,提问作者user2059972
相关产品推荐
相关产品推荐

