对 Kivy 放置 "center" 个圆圈感到困惑——包括屏幕截图和代码

Confused about Kivy's placement of a "center" of a circle -- screenshot and code included

我正在尝试使用 Kivy 来试验一个小游戏。我一直在松散地遵循教程,但我基本上对浮动布局在屏幕上呈现图形的方式感到困惑。

我正在尝试将 "player" 绘制为屏幕中间的矩形。但它显然没有在中心渲染(我通过在中心渲染十字准线来表示):

代码如下:

<Game>:
    FloatLayout:
        size: root.size
        Widget:
            id: game
            canvas:
                Color:
                    rgb: dark
                Rectangle:
                    pos: root.center_x/5, 0
                    size: root.width*4/5, root.height
                Color:
                    rgb: violet
                Rectangle:
                    pos: root.center_x, 0
                    size: 2, root.height
                Rectangle:
                    pos: 0, root.center_y
                    size: root.width, 2
        Player:
            id: player
            size_hint: 300, 300
            center_x: root.center_x
            center_y: root.center_y

<Player>:
    canvas:
        Color:
            rgb: crimson
        Rectangle:
            pos: self.pos
            size: self.size_hint
        Color:
            rgb: dark
        Ellipse:
            pos: self.x+5, self.y+5
            size: self.size_hint_x-10, self.size_hint_y-10

Python 代码现在真的很少;我只是想学习如何处理图形:

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import ObjectProperty, ListProperty, NumericProperty
from kivy.graphics.vertex_instructions import(Rectangle, Ellipse)
from kivy.graphics.context_instructions import Color

class Player(Widget):
    pass

class Game(Widget):
    player = ObjectProperty(None)

class GameApp(App):

    def build(self):
        game = Game()
        return game


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

试试下面的代码。使用显式尺寸而不是 size_hint 并将它们相对于父级定位。

<Game>:
    FloatLayout:
        size: root.size
        Widget:
            id: game
            canvas:
                Color:
                    rgb: 1, 0, 0 
                Rectangle:
                    pos: root.center_x/5, 0
                    size: root.width*4/5, root.height
                Color:
                    rgb: 1, 1, 0
                Rectangle:
                    pos: root.center_x, 0
                    size: 2, root.height
                Rectangle:
                    pos: 0, root.center_y
                    size: root.width, 2
        Player:
            id: player
            center_x: root.center_x
            center_y: root.center_y

<Player>:
    size_val_r: 300
    size_val_e: 290
    canvas:
        Color:
            rgb: 0.8, 0.6, 0
        Rectangle:
            size: self.size_val_r, self.size_val_r
            pos: root.width/2 - self.size_val_r/2, self.height/2 - self.size_val_r/2
        Color:
            rgb: 1, 1, 0.6
        Ellipse:
            pos: root.width/2 - self.size_val_e/2, self.height/2 - self.size_val_e/2
            size: self.size_val_e, self.size_val_e