Introduction
Kivy is a Python GUI development library that runs on iOS, Android, Windows, OS X, and GNU/Linux platforms. It helps developers create apps with cutting-edge multi-touch user interfaces. Kivy's basic concept allows developers to create an app once and deploy it across all devices, allowing for reusable and deployable code as well as rapid and easy interaction design and prototyping.
In this article, with the help of a few examples, we'll look at how to draw Ellipse (different polygons) in Kivy Python. This post assumes you've done some Python programming before. If that is not the case, you can return here after reading our Basics of Python article.
Ellipse
Ellipse is a canvas vertex instruction. It enables the creation of regular polygons or arcs based on them. Varied polygons with different numbers of sides and vertices on a circle will be discussed in this article.
We can build polygons based on an ellipse, much like in Kivy. Note that the angles in Kivy are not the same as those in math. The 0-degree point in Kivy relates to the 90-degree point in mathematics.
Implementation
Now we'll look at a sample python application code that uses Kivy to show how to draw Ellipse (different polygons) in Kivy Python. .kv file stores source code in the Kivy syntax, which include rule definitions, a root widget, dynamic class definitions, and templates. Each Widget in Kivy already has a Canvas by default. When you create a widget, you can create all the instructions needed for drawing.
main.py file
# program to create different polygons using Ellipse
# to import kivy module
import kivy
# this restrict version i.e
# below this kivy version we cannot
# use the app
kivy.require("1.9.1")
# app:always is used to refers the instance of your application
from kivy.app import App
# The GridLayout is used to arrange children in a matrix.
# takes the available space and
# divides it into columns and rows,
from kivy.uix.gridlayout import GridLayout
# to create the Layout class
class Ellipsekv(GridLayout):
pass
# to create the App class
class EllipseApp(App):
# defining build()
def build(self):
return Ellipsekv()
# to run the App
if __name__=='__main__':
EllipseApp().run()
.kv file
# Ellipse.kv file of the code
# we have to give the start for the arcs
# and the end angle.
#default number of segments we use,
# 180, and 5, are for the two ellipse arcs.
# 6 ellipse arcs, following the same pattern.
#:set angle_start_row2 240
#:set angle_end_row2 480
#:set angle_start_row3 120
#:set angle_end_row3 240
<Ellipsekv>:
# Set column to 4
cols:4
# for Row 1
# to Create Canvas
canvas:
Color:
rgb: 0.3, 0.5, 1
Rectangle:
pos: self.pos
size: self.size
# This will create the circle
# as no segment is fixed in Ellipse
# so by default it creates the circle
RelativeLayout:
canvas:
Color:
rgb: 0.4, .9, .5
Ellipse:
pos: 0, 0
size: self.size
# This will create pentagon as
# segment = 5
RelativeLayout:
canvas:
Ellipse:
segments: 5
pos: 0, 0
size: self.size
# This will create square shape as
# segment = 4
RelativeLayout:
canvas:
Ellipse:
segments: 4
pos: 0, 0
size: self.size
# This will create triangle as
# segment = 3
RelativeLayout:
canvas:
Ellipse:
segments: 3
pos: 0, 0
size: self.size
#################################################
# Row 2
RelativeLayout:
canvas:
# Assigning colour to all in row 2
Color:
rgb: 0.9, .8, .36
# Creating the arc as assigned above
Ellipse:
angle_start: angle_start_row2
angle_end: angle_end_row2
pos: 0, 0
size: self.size
# Creating the arc as assigned above
# segment 5
RelativeLayout:
canvas:
Ellipse:
angle_start: angle_start_row2
angle_end: angle_end_row2
segments: 7
pos: 0, 0
size: self.size
# Creating the arc as assigned above
# segment 4
RelativeLayout:
canvas:
Ellipse:
angle_start: angle_start_row2
angle_end: angle_end_row2
segments: 6
pos: 0, 0
size: self.size
# Creating the arc as assigned above
# segment 5
RelativeLayout:
canvas:
Ellipse:
angle_start: angle_start_row2
angle_end: angle_end_row2
segments: 2
pos: 0, 0
size: self.size
#################################################
# Row 3
RelativeLayout:
canvas:
Color:
rgb: .7, .2, .1
Ellipse:
angle_start: angle_start_row3
angle_end: angle_end_row3
pos: 0, 0
size: self.size
RelativeLayout:
canvas:
Ellipse:
angle_start: angle_start_row3
angle_end: angle_end_row3
segments: 6
pos: 0, 0
size: self.size
RelativeLayout:
canvas:
Ellipse:
angle_start: angle_start_row3
angle_end: angle_end_row3
segments: 3
pos: 0, 0
size: self.size
RelativeLayout:
canvas:
Ellipse:
angle_start: angle_start_row3
angle_end: angle_end_row3
segments: 2
pos: 0, 0
size: self.size
Output