Adding images, colors, and backgrounds

In this section, we will discuss how to add images and colors to our graphics and how to control which graphic comes on top of which one. We continue using the same Python code of the first section. This time, we run it with a 400 x 100 screen size: python drawing.py --size=400x100. The following screenshot shows the final result of this section:

Images and Colors

The following is the corresponding drawing.kv code:

64. # File name: drawing.kv (Images and colors)
65. <DrawingSpace>:
66.     canvas:
67.         Ellipse:
68.            pos: 10,10
69.            size: 80,80
70.            source: 'kivy.png'
71.         Rectangle:
72.            pos: 110,10
73.            size: 80,80
74.            source: 'kivy.png'
75.        Color: 
76.            rgba: 0,0,1,.75
77.        Line:
78.            points: 10,10,390,10
79.            width: 10
80.            cap: 'square'
81.          Color: 
82.            rgba: 0,1,0,1
83.        Rectangle:
84.            pos: 210,10
85             size: 80,80
86.             source: 'kivy.png'
87.        Rectangle:
88.            pos: 310,10
89.            size: 80,80

This code starts with Ellipse (line 67) and Rectangle (line 71). We used the source property, which inserts an image to decorate each polygon. The kivy.png image is 80 x 80 pixels with a white background (without any alpha/transparency channel). The result is shown in the first two columns of the "Images and Colors" screenshot.

In line 75, we used the context instruction Color to change the color (with the rgba property: red, green, blue, and alpha) of the coordinate space context. This means that the next vertex instruction will be drawn with the color changed by rgba. A context instruction basically changes the current coordinate space context. In the screenshot, you can see the thin blue bar (or very dark gray bar in the printed version of this book) at the bottom (line 77) that appears as transparent blue (line 76) instead of the default white (1,1,1,1) of the previous examples. We set the ends shape of the line, to a square with the cap property (line 80).

We changed the color again in line 81. After this, we drew two more rectangles, one with the kivy.png image and another without it. In the preceding screenshot, you can see that the white part of the image has become as green, or light gray in the printed version of this book, as the basic Rectangle on the right.

Tip

The Color instruction acts as a light that illuminates the kivy.png image, it doesn't simply paint over it.

There is another important detail to notice in the screenshot. The blue (dark gray in the printed version) line at the bottom goes over the first two polygons and goes under the last two. The instructions are executed in order and this might bring some unwanted results. Kivy provides a solution to make this execution more flexible, and structured, which we will introduce in the next section.