25. Rotate

Rotate, a context canvas instruction, causes any vertex instructions, that follow, to rotate about some point.

---

The root class is based on a GridLayout.

# ex25.py

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

class Ex25(GridLayout):
    pass
        
class Ex25App(App):
    def build(self):
        return Ex25()

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

---

An image was used from the site opengameart.org. You could search for grandfather clock. Then in the graphics program GIMP, a transparency layer was added, by selecting the Layer menu, and then the Transparency submenu, and finally the Add Alpha Channel option. The white exterior was selected by Color and deleted. Lastly the file was renamed to gfc.png. This image was saved in the same folder with the python and kv files.

---

In the kv file, we define columns to be 2. Next, 4 RelativeLayouts are defined and thus we have two rows. Each will have the same size, half of root width and height. The background for the first RelativeLayout is red. The image is drawn, using the source property of Rectangle.

---

RelativeLayout 2 mirrors RelativeLayout 1, except now the background color is green. For each layout, the image is drawn at the same relative points.

---

RelativeLayout 3 is colored blue and has the same coordinates as RelativeLayout 1 for the image. There is a rotation of 30 degrees about an origin, which is defined as the center of the layout. Since the default axis, plus z, is used, rotation increases counterclockwise.

---

RelativeLayout 4 has a cyan background. The rotation of the image is -30 degrees.

# ex25.kv

<Ex25>:
    cols: 2
    RelativeLayout:
        canvas:
            Color:
                rgb: 1,0,0
            Rectangle:
                size: root.width/2,root.height/2
                pos: 0,0
            Rectangle:
                source: 'gfc.png'
                size: 34,101
                pos: 180,125
    RelativeLayout:
        canvas:
            Color:
                rgb: 0,1,0
            Rectangle:
                size: root.width/2,root.height/2
                pos: 0,0
            Rectangle:
                source: 'gfc.png'
                size: 34,101
                pos: 180,125
    RelativeLayout:
        canvas:
            Color:
                rgb: 0,0,1
            Rectangle:
                size: root.width/2,root.height/2
                pos: 0,0
            Color:
                rgb: .5,0,.5
            Rotate:
                angle: 30
                origin: root.width/4,root.height/4
            Rectangle:
                source: 'gfc.png'
                size: 34,101
                pos: 180,125
    RelativeLayout:
        canvas:
            Color:
                rgb: 0,1,1
            Rectangle:
                size: root.width/2,root.height/2
                pos: 0, 0
            Color:
                rgb: .5,0,.5
            Rotate:
                angle: -30
                origin: root.width/4,root.height/4
            Rectangle:
                source: 'gfc.png'
                size: 34,101
                pos: 180,125
            

---

This is the result. The two RelativeLayouts in the first row are the reference. The second row shows rotation by 30 degrees and -30 degrees.

---