python kivy 在矩形内添加文本

Question

我该如何在一个矩形里面添加文字呢？我用下面的代码，并在画布里加了一个标签，希望它能显示在矩形里面。

import kivy
from kivy.app import App
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.video import Video
from kivy.uix.relativelayout import RelativeLayout
from kivy.graphics import *

class MyApp(App):
    def build(self):
        r = AnchorLayout()
        f = RelativeLayout()
        g = GridLayout(cols=3, rows=5)
        v = Video(source='driver.mp4', state='play', options={'eos':'loop'})
        l1 = Label(text="jenkins", font_size=32)
        l2 = Label(text="git", font_size=32)
        f.add_widget(v)
        f.add_widget(g)
        g.add_widget(l1)
        g.add_widget(l2)
        with g.canvas:
            Color(.4, .1, .1)
            Rectangle(pos=(100,10), size=(100,100))
            Label(text="KSHK")
        return f

if __name__ == "__main__":
    MyApp().run()

更新：这样做并不能把文字对齐到ColoredLabel的中心。

import kivy
from kivy.app import App
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.video import Video
from kivy.uix.relativelayout import RelativeLayout
from kivy.graphics import *
from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout
from random import random
from kivy.properties import ListProperty


kv = '''
<ColoredLabel>:
    background_color:
    canvas.before:
        Color:
            rgba: self.background_color
        Rectangle:
            pos: (10,10)
            size: (100,100)
    '''

Builder.load_string(kv)

class ColoredLabel(Label):
    background_color = ListProperty((0,0,0,1))

class MyApp(App):
    def build(self):
        f = AnchorLayout()
        g = GridLayout(cols=2, rows=2)
        layout = BoxLayout(size_hint=(1, None), height=50)
        v = Video(source='driver.mp4', state='play', options={'eos':'loop'})
        l1 = Label(text="jenkins", font_size=32)
        l2 = Label(text="git", font_size=32)
        f.add_widget(v)


        label = ColoredLabel(text="Hello World!", background_color=(random(), random(), random(), 1))
        g.add_widget(label)


        f.add_widget(g)

        return f

if __name__ == "__main__":
    MyApp().run()

Answer 1

使用 Label 并设置自定义背景颜色，然后把它放到你的布局里。比如：

from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ListProperty
from kivy.app import App
from kivy.lang import Builder

from random import random

kv = '''
<ColoredLabel>:
    background_color:
    canvas.before:
        Color:
            rgba: self.background_color
        Rectangle:
            pos: self.pos
            size: self.size
'''

Builder.load_string(kv)

class ColoredLabel(Label):
    background_color = ListProperty((0, 0, 0, 1))

class TestApp(App):
    def build(self):
        layout = BoxLayout(size_hint=(1, None), height=50)
        for label in ('a', 'b', 'c', 'd'):
            label = ColoredLabel(text=label, background_color=(random(), random(), random(), 1))
            layout.add_widget(label)

        return layout

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

更新

解决原问题中的问题：

import kivy
from kivy.app import App
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.video import Video
from kivy.uix.relativelayout import RelativeLayout
from kivy.graphics import *
from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout
from random import random
from kivy.properties import ListProperty


kv = '''
<ColoredLabel>:
    size: (100,100)
    pos: (10,10) # no effect
    background_color:
    canvas.before:
        Color:
            rgba: self.background_color
        Rectangle:
            pos: self.pos
            size: self.size
    '''

Builder.load_string(kv)

class ColoredLabel(Label):
    background_color = ListProperty((0,0,0,1))

class MyApp(App):
    def build(self):
        f = AnchorLayout()
        g = GridLayout(cols=2, rows=2)
        layout = BoxLayout(size_hint=(1, None), height=50)
#        v = Video(source='driver.mp4', state='play', options={'eos':'loop'})
        l1 = Label(text="jenkins", font_size=32)
        l2 = Label(text="git", font_size=32)
#        f.add_widget(v)

        label = ColoredLabel(text="Hello World!", size_hint=(None, None), background_color=(random(), random(), random(), 1))
        g.add_widget(label)

        f.add_widget(g)

        return f

if __name__ == "__main__":
    MyApp().run()

注意，ColoredLabel 的 Rectangle 需要设置 pos: self.pos 和 size: self.size，这样才能在标签实际所在的位置绘制。这就是我在上一级中改变了 Label 自身的大小的原因。画布的大小是和它绑定在一起的。至于位置，是由放置 ColoredLabel 的布局控制的，所以从 ColoredLabel 类去改变位置并不会有太大效果。可以和 FloatLayout 做个对比：

import kivy
from kivy.app import App
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.video import Video
from kivy.uix.relativelayout import RelativeLayout
from kivy.graphics import *
from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout
from random import random
from kivy.properties import ListProperty

from kivy.uix.floatlayout import FloatLayout


kv = '''
<ColoredLabel>:
    size: (150, 200)
    pos: (50, 150)
    background_color:
    canvas.before:
        Color:
            rgba: self.background_color
        Rectangle:
            pos: self.pos
            size: self.size
    '''

Builder.load_string(kv)

class ColoredLabel(Label):
    background_color = ListProperty((0,0,0,1))

class MyApp(App):
    def build(self):
        f = FloatLayout()
        label = ColoredLabel(text="Hello World!", size_hint=(None, None), background_color=(random(), random(), random(), 1))
        f.add_widget(label)

        return f

if __name__ == "__main__":
    MyApp().run()

在这种情况下，改变 ColoredLabel 内部的 pos 实际上是有效的。