如何居中canvas?基维

how to center canvas? kivy

如何将白色方块居中?我尝试了很多变体,但没有任何效果。它适用于标签和按钮,但不适用于 canvas。或者也许我做的一切都是错误的。也许您建议了这项任务的最佳解决方案。我需要 window 有背景,左角有标签,右角有标签,中间有一个正方形

from kivy.app import App
from kivy.uix.widget import Widget

from kivy.uix.floatlayout import FloatLayout
from kivy.config import Config
from kivy.animation import Animation

from kivy.vector import Vector
from kivy.clock import Clock
from kivy.properties import NumericProperty, ReferenceListProperty,\
    ObjectProperty

Config.set('graphics', 'resizable', 'true')
Config.set('graphics', 'width', '900')
Config.set('graphics', 'height', '450')
Config.write()

class Helicopter(Widget):
    pass


class Background(Widget):
    pass


class Root(FloatLayout):
    #def on_touch_down(self, touch):
     #   Animation(center=touch.pos).start(self)
    pass

class FriendsApp(App):
    def build(self):

        return Root()

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

.kv 文件

#: kivy 1.10.0
<Root>
    AnchorLayout:
        canvas.before:
            Color:
                rgba: 1, 1, 1, 1  # white
            Rectangle:
                source: 'background.jpg'
                pos: self.pos
                size: self.size
        size: self.parent.size
        anchor_x: 'center'
        anchor_y: 'center'


    AnchorLayout:
        anchor_y:'top'
        anchor_x:'left'
        padding: 20
        Label:
            text: 'Lives: x2'
            size: self.texture_size
            size_hint: None, None

    AnchorLayout:
        anchor_x: 'right'
        anchor_y: 'top'
        padding: 20
        Label:
            text: 'Score: 0000000'
            size: self.texture_size
            size_hint: None,None

    AnchorLayout:
        anchor_x: 'center'
        anchor_y: 'center'
        canvas:
            Rectangle:
                size: 100, 100
                pos: self.pos

AnchorLayout 有自己的 canvas,您无法自行对齐。这个问题有两种解决方案。在示例中,添加了颜色以进行可视化。

The AnchorLayout aligns its children to a border (top, bottom, left, right) or center.

解决方案 1

添加 小部件 作为 children。

AnchorLayout:
    anchor_x: 'center'
    anchor_y: 'center'
    Widget:
        canvas.before:
            Color:
                rgba: 1, 1, 1, 1  # white
            Rectangle:
                size: 100, 100
                pos: self.pos
        size_hint: None,None

解决方案 2

将最后一个AnchorLaoyout替换为Widget

Widget:
    canvas:
        Rectangle:
            pos: self.center_x - 50, self.center_y - 50
            size: 100, 100

示例 - 解决方案 1

kv 文件

#: kivy 1.10.0

<Root>
    AnchorLayout:
        anchor_y:'top'
        anchor_x:'left'
        padding: 20
        Label:
            canvas.before:
                Color:
                    rgba: 1, 0, 0, 1  # red
                Rectangle:
                    pos: self.pos
                    size: self.size
            text: 'Lives: x2'
            size: self.texture_size
            size_hint: None, None

    AnchorLayout:
        anchor_x: 'right'
        anchor_y: 'top'
        padding: 20
        Label:
            canvas.before:
                Color:
                    rgba: 0, 0, 1, 1  # blue
                Rectangle:
                    pos: self.pos
                    size: self.size
            text: 'Score: 0000000'
            size: self.texture_size
            size_hint: None,None

    AnchorLayout:
        anchor_x: 'center'
        anchor_y: 'center'
        Widget:
            canvas.before:
                Color:
                    rgba: 1, 1, 1, 1  # white
                Rectangle:
                    size: 100, 100
                    pos: self.pos
            size_hint: None,None

输出