4 min read

(For more resources related to this topic, see here.)

The following screenshot (Images and colors) shows the final result of this article:

 

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 an Ellipse (line 67) and a Rectangle (line 71). We use the source property, which inserts an image to decorate the polygon. The image kivy.png 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 previous screenshot (Images and colors).

In line 75, we use 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 VertexInstructions will be drawn with the color changed by rgba. A ContextInstruction changes the current coordinate space context. In the previous screenshot, the blue bar at the bottom (line 77) has a transparent blue (line 76) instead of the default white (1,1,1,1) as seen in the previous examples. We set the ends shape of the line to a square with the cap property (line 80).

We change the color again in line 81. After that, we draw two more rectangles, one with the kivy.png image and other without it. In the previous screenshot (Images and color) you can see that the white part of the image has become as green as the basic Rectangle on the left. Be very careful with this. The Color instruction acts as a light that is illuminating the kivy.png image. This is why you can still see the Kivy logo on the background instead of it being all covered by the color.

There is another important detail to notice in the previous screenshot. There is a blue line that crosses the first two polygons in front and then crosses behind the last two. This illustrates the fact that the instructions are executed in order and this might bring some unwanted results. In this example we have full control of the order but for more complicated scenarios Kivy provides an alternative.

We can specify three Canvas instances (canvas.before, canvas, and canvas.after) for each Widget. They are useful to organize the order of execution to guarantee that the background component remains in the background, or to bring some of the elements to the foreground.

The following drawing.kv file shows an example of these three sets (lines 92, 98, and 104) of instructions:

90. # File name: drawing.kv (Before and After Canvas)
91. <DrawingSpace>:
92.   canvas.before:
93.     Color: 
94.       rgba: 1,0,0,1
95.     Rectangle:
96.       pos: 0,0
97.       size: 100,100
98.   canvas:
99.     Color: 
100.       rgba: 0,1,0,1
101.     Rectangle:
102.       pos: 100,0
103.       size: 100,100
104.   canvas.after:
105.     Color: 
106.       rgba: 0,0,1,1
107.     Rectangle:
108.       pos: 200,0
109.       size: 100,100
110.   Button:
111.     text: 'A very very very long button'
112.     pos_hint: {'center_x': .5, 'center_y': .5}
113.     size_hint: .9,.1

In each set, a Rectangle of different color is drawn (lines 95, 101, and 107). The following diagram illustrates the execution order of the canvas. The number on the top-left margin of each code block indicates the order of execution:

Execution order of the canvas

Please note that we didn’t define any canvas, canvas.before, or canvas.after for the Button, but Kivy does. The Button is a Widget and it displays graphics on the screen. For example, the gray background is just a Rectangle. That means that it has instructions in its internal Canvas instances. The following screenshot shows the result (executed with python drawing.py –size=300×100):

Before and after canvas

The graphics of the Button (the child) are covered up by the graphics of instructions in the canvas.after. But what is executed between canvas.before and canvas? It could be code of a base class when we are working with inheritance and we want to add instructions in the subclass that should be executed before the base class Canvas instances. A practical example of this will be covered when we apply them in the last section of this article in the comic creator project. The canvas.before will also be useful when we study how to dynamically add instruction to Canvas instances

For now, it is sufficient to understand that there are three sets of instructions (Canvas instances) that provide some flexibility when we are displaying graphics on the screen. We will now explore some more context instructions related to three basic transformations.

Summary

In this article we learned how to add images and colors to shapes and how to position graphics at a front or back level.

Resources for Article:

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here