26. Scale, PushMatrix and PopMatrix

Scale, PushMatrix and PopMatrix are context canvas instructions. Scale is used to change the scale size of the following canvas vertex instructions, and PushMatrix is used to save the current context so it can be used later, with a call to PopMatrix.

---

The root class is based on a GridLayout.

# ex26.py

from kivy.uix.gridlayout import GridLayout
from kivy.app import App

class Ex26(GridLayout):
    pass
        
class Ex26App(App):
    def build(self):
        return Ex26()

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

---

In the kv file, we define columns to be 2. Next, 4 RelativeLayouts are defined and thus we have two rows. The background for the first RelativeLayout is red. The image, that was downloaded in the last Tutorial, is drawn, using the source property of Rectangle. For the image position, instead of giving a position in middle of RelativeLayout, the position is given as 0,0; however it is translated, so it is nearly in the middle.

---

RelativeLayout 2 has the same commands as RelativeLayout 1, except now the background color is green. The image is translated, again, to approximately the middle of RelativeLayout.

---

RelativeLayout 3 has a background of blue. The current context of the canvas is saved by the PushMatrix, as we are pushing it to memory to be popped later.

---

We have the same translation. Then, we scale up 30%. The image has the same coordinates as before.

---

There is a PopMatrix instruction so the Label's canvas instructions will not be translated or scaled. Since the Label takes up the entire RelativeLayout, the text of the label will be in the approximate center. Thus, the y is moved down a little bit so the text is not inside the image. There is some markup in the Label.

---

The same is done for RelativeLayout 4, except now the image is scaled down 30 percent. The background is magenta.

# ex26.kv

<Ex26>:
    cols: 2
    RelativeLayout:
        canvas:
            Color:
                rgb: 1,0,0
            Rectangle:
                size: root.width/2,root.height/2
                pos: 0,0
            Translate:
                xy: root.width/4-20,root.height/4-25
            Rectangle:
                source: 'gfc.png'
                size: 34,101
                pos: 0,0
    RelativeLayout:
        canvas:
            Color:
                rgb: 0,1,0
            Rectangle:
                size: root.width/2,root.height/2
                pos: 0,0
            Translate:
                xy: root.width/4-20,root.height/4-25
            Rectangle:
                source: 'gfc.png'
                size: 34,101
                pos: 0,0
    RelativeLayout:
        canvas.before:
            PushMatrix:
            Color:
                rgb: 0,0,1
            Rectangle:
                size: root.width/2,root.height/2
                pos: 0,0
            Translate:
                xy: root.width/4-20,root.height/4-25
            Scale:
                xyz: 1.3, 1.3, 0
            Rectangle:
                source: 'gfc.png'
                size: 34,101
                pos: 0,0
        canvas:
            PopMatrix:
        Label:
            pos: 0,-50
            text: '[b][size=32sp]Scaled up[/size][/b]'
            markup: True
    RelativeLayout:
        canvas.before:
            PushMatrix:
            Color:
                rgb: 1,0,1
            Rectangle:
                size: root.width/2,root.height/2
                pos: 0, 0
            Translate:
                xy: root.width/4-20,root.height/4-25
            Scale:
                xyz: .7,.7,0
            Rectangle:
                source: 'gfc.png'
                size: 34,101
                pos: 0,0
        canvas:
            PopMatrix:
        Label:
            pos: 0, -50
            text: '[b][size=32sp]Scaled down[/size][/b]'
            markup: True
            

---

This is the result. The first two RelativeLayouts form the first row, and are reference. The next two RelativeLayouts in 2nd row are scaled up or scaled down.

---