Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Centering an object in Kivy

I am trying to center a circle inside a layout. I'm currently doing some padding calculations, but I'm also looking for a better way. I imagine one of the predefined layouts may be a better choice. Here's what my code is producing...

For square layouts:

enter image description here

For wide layouts:

enter image description here

This is the right behavior, which is great, but is there a better way? I can imagine this getting messy with non-circle shapes, for example.

Here's my code:

#!/usr/bin/kivy
import kivy
kivy.require('1.7.2')

from random import random
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.gridlayout import GridLayout
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.relativelayout import RelativeLayout
from kivy.graphics import Color, Ellipse, Rectangle

class MinimalApp(App):
    title = 'My App'
    def build(self):
        root = RootLayout()
        return(root)

class RootLayout(AnchorLayout):
    pass

class Circley(RelativeLayout):
    pass

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

And the KV:

#:kivy 1.7.2
#:import kivy kivy

<RootLayout>:
    anchor_x: 'center'                              # I think this /is/ centered
    anchor_y: 'center' 
    canvas.before:
        Color:
            rgba: 0.4, 0.4, 0.4, 1
        Rectangle:
            pos: self.pos
            size: self.size
    Circley:
        anchor_x: 'center'                          # this is /not/ centered.
        anchor_y: 'center' 
        canvas.before:
            Color:
                rgba: 0.94, 0.94, 0.94, 1
            Ellipse:
                size: min(self.size), min(self.size)
                pos: 0.5*self.size[0] - 0.5*min(self.size), 0.5*self.size[1] - 0.5*min(self.size)
                Label:
                    text: unicode(self.size)    # this is /not/ appearing
                    color: 1,0,0,1
like image 704
Mittenchops Avatar asked Dec 09 '13 00:12

Mittenchops


1 Answers

Snippet using FloatLayout, size_hint and pos_hint:

from kivy.app import App
from kivy.lang import Builder

kv = '''
FloatLayout:
    Widget:
        size: min(root.size), min(root.size)
        size_hint: None, None
        pos_hint: {'center_x': .5, 'center_y': .5}
        canvas:
            Color:
                rgb: 1, 0, 0
            Ellipse:    
                size: self.size
                pos: self.pos
'''
Builder.load_string(kv)

class MyApp(App):
    def build(self):
        return Builder.load_string(kv)

MyApp().run()

Flag of Japan:

from kivy.app import App
from kivy.lang import Builder

kv = '''
FloatLayout:
    canvas:
        Color:
            rgb: 1, 1, 1
        Rectangle:    
            size: self.size
            pos: self.pos   
    Widget:
        size: min(root.size)/2, min(root.size)/2
        size_hint: None, None
        pos_hint: {'center_x': .5, 'center_y': .5}
        canvas:
            Color:
                rgb: 1, 0, 0
            Ellipse:    
                size: self.size
                pos: self.pos
'''
Builder.load_string(kv)

class MyApp(App):
    def build(self):
        return Builder.load_string(kv)

MyApp().run()
like image 82
Nykakin Avatar answered Nov 07 '22 14:11

Nykakin