Search code examples
pythonkivyz-index

Kivy: change z-index of canvas rectangles


I am very new to kivy, and have been trying to figure out how to order rectangles created with the canvas class in the z dimension. Using the .kv language I created a root widget that creates a grid of rectangles. That part worked out fine, then I created a child widget consisting of 1 blue rectangle that I was able to move around with the kivy clock. The problem is that I want to display the blue rectangle on top of everything else. This is my python code (full of unnecessary imports):

import kivy
from kivy.config import Config
Config.set('graphics', 'resizable', False)
Config.set('graphics', 'width', '1000')
Config.set('graphics', 'height', '700')
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.button import Button
from kivy.uix.gridlayout import GridLayout
from kivy.uix.floatlayout import FloatLayout
from kivy.graphics import *
from kivy.core.window import Window
from kivy.properties import (ObjectProperty, ReferenceListProperty, ListProperty)
import random
from kivy.clock import Clock
from kivy.vector import Vector


class board(FloatLayout):
    car = ObjectProperty(None)
    def __init__(self, **k):
        super(board, self).__init__(**k)
        with self.canvas:
            l = 2
            w = 4
            for b in range(1, l+1):
                for a in range(1,w+1):
                    for i in range(3):
                        for x in range(2):
                            numb = random.randint(1, 2)

                            if numb == 1:

                                Color(1, 0, 0, 1)
                                Rectangle(pos=(a*70+20*(x)-50, b*80+20*(i)-20), size=(10, 10))
                    Color(0,1,0,1)
                    print(a)
                    print(b)

                    Rectangle(pos=(a*70-10, 20), size=(20, l*80+35))
                    Rectangle(pos=(0, 20), size=(20, l*80+35))
                    Rectangle(pos=(20, 20), size=(w*70-30, 20))
                Rectangle(pos=(20, b*80 + 35), size=(w*70-30, 20))




class Car(Widget):
    velocity = ListProperty([1, 1])
    def __init__(self, **k):
        super(Car, self).__init__(**k)
        self.canvas.add(Color(1,0,0,1))
        self.canvas.add(Rectangle(size=(50,50)))
        Clock.schedule_interval(self.update, 1.0/60.0)


    def update(self, *args):
        self.x += self.velocity[0]
        self.y += self.velocity[1]
        print('hello')



class RobotApp(App):

    def build(self):
        ba= Car()

        return board()


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

This is my kivy code:


#:kivy 1.11.1
<Car>:

  canvas:

    Color:
      rgba: 0, 0, 1, 1
    Rectangle:
      pos:self.pos
      size: 10, 10
<board>:
  car: Cars
  canvas:
    Rectangle:
      pos: 0, 0
      size: 500, 700
  Car:
    id: Cars
    pos: self.parent.pos


Solution

  • Thanks to Inclement, I was able to figure out the problem. I had to change three lines: One in the python file.

    with self.canvas:
    

    to

    with self.canvas.before:
    

    Two in the kivy file.

    <Car>:
        canvas:
    

    to

    <Car>:
        canvas.after:
    

    then

    <board>:
        canvas:
    

    to

     <board>:
            canvas.before:
    

    my blue square now displays on top, thanks!