Späť na hlavnú stránku

Práca s grafikou

Knižnica tkinter

Tkinter je štandardná knižnica pre vytváranie grafického používateľského rozhrania (GUI) v Pythone. Je jednoduchá na použitie a dostupná pre väčšinu operačných systémov. Tkinter je súčasťou štandardnej inštalácie Pythonu, takže nie je potrebné inštalovať ďalšie knižnice.

Začneme jednoduchým programom, ktorý vytvorí prázdne okno aplikácie. Tento kód vytvorí prázdne okno s titulkom "Moja prvá aplikácia" a veľkosťou 400x300 pixelov. Metóda mainloop() spustí hlavný cyklus aplikácie, ktorý čaká na používateľské vstupy a spracováva udalosti.

import tkinter

# Vytvorenie hlavného okna
okno = tkinter.Tk()
okno.title("Moja prvá aplikácia")
okno.geometry("400x300") # veľkosť okna (šírka x výška)

# Spustenie hlavného cyklu aplikácie
okno.mainloop()

Vytvorenie plátna (Canvas)

Canvas (plátno) je widget, ktorý umožňuje kresliť rôzne tvary a grafiku priamo vo vytvorenej aplikácii. Najprv si plátno musíme vytvoriť:
platno = tkinter.Canvas(okno, width=300, height=250, bg="pink")
platno.pack(pady=25) # odsadenie zhora o 25 pixelov
Parametrom bg určíme farbu pozadia vytvoreného plátna. Python pozná niekoľko "preddefinovaných" farieb (farebných konštánt), napr. white, black, red, green, blue, yellow, magenta, cyan, gray, orange, pink, purple, brown, coral, gold, lavender, lime, maroon, navy, olive, peach, plum, silver, skyblue, violet, aquamarine, azure, beige, chocolate... Vždy sa musia písať v úvodzovkách, napr. bg="white"

Ďalšie farby tu.

Vytvorenie plátna v aplikácii:

import tkinter

okno = tkinter.Tk()
okno.title("Moja prvá aplikácia")
okno.geometry("500x400")

platno = tkinter.Canvas(okno, width=400, height=300, bg="white")
platno.pack(pady=20)

okno.mainloop()
Na plátno môžeme dať vykresliť rôzne útvary. Ich pozíciu určíme súradnicami: x (na ľavom kraji plátna je x = 0, a postupne sa x-ová súradnica zväčšuje až k pravému okraju a keďže sme začali od 0 a celé plátno má na šírku "width" pixelov, tak maximálna x-ová súradnica môže byť width - 1, tj. x = šírka plátna - 1 = width-1) a y (na hornom okraji plátna je y = 0 a postupne narastá až k spodnému okraju, kde je y = výška plátna - 1 = height - 1).
sur

Geometrické útvary na plátne

Na vytvorené plátno sa dajú nakresliť rôzne geometrické útvary, ako sú napríklad čiara, lomená čiara, obdĺžnik, ovál a mnohouholník.

Čiara a lomená čiara:

Na vykreslenie čiary na plátno potrebujeme upresniť parametre útvaru: kde sa má útvar na plátne vykresliť (x-ová a y-ová súradnica "začiatku" a x-ová a y-ová súradnica "konca"), farba a hrúbka čiary:
platno.create_line(x1_zac, y1_zac, x2_kon, y2_kon, fill=farba_ciary, width=hrubka_ciary)

Príklad: čiara a lomená čiara

import tkinter

okno = tkinter.Tk()
okno.title("Moja prvá aplikácia")
okno.geometry("500x400")

platno = tkinter.Canvas(okno, width=400, height=300, bg="white")
platno.pack(pady=20)

# Kreslenie čiary
platno.create_line(200, 50, 300, 60, width=10, fill="blue")

# Kreslenie lomenej čiary
platno.create_line(100, 100, 150, 150, 150, 200, width=5, fill="red")

okno.mainloop()

Okrem čiar vieme na plátno nakresliť obdĺžnik (aj štvorec) alebo ovál (aj kruh).

Obdĺžnik je daný súradnicami dvoch vrcholov (oproti sebe cez uhlopriečku):
platno.create_rectangle(x1,y1,x2,y2, fill=farba_vyplne, outline=farba_ohranicenia, width=sirka_ohranicenia)
obdlznik

Ovál je daný súradnicami obdĺžnika, do ktorého je ovál vpísaný:
platno.create_oval(x1,y1,x2,y2, fill=farba_vyplne, outline=farba_ohranicenia, width=sirka_ohranicenia)
oval

Príklad: obdĺžnik a ovál

import tkinter

okno = tkinter.Tk()
okno.title("Moja prvá aplikácia")
okno.geometry("500x400")

platno = tkinter.Canvas(okno, width=400, height=300, bg="white")
platno.pack(pady=20)

# Kreslenie obdĺžnika
platno.create_rectangle(10, 20, 110, 80, fill="green", outline="black", width=2)

# Kreslenie štvorca
platno.create_rectangle(110, 120, 150, 160, fill="red", outline="black", width=1)

# Kreslenie oválu
platno.create_oval(200, 200, 300, 250, fill="yellow", outline="black", width=1)

# Kreslenie kruhu
platno.create_oval(180, 180, 220, 220, fill="gold", outline="black", width=1)

okno.mainloop()

Mnohouholník

Na vykreslenie mnohouholníka je potrebné do príkazu zapísať súradnice vrcholov - v poradí po jeho obvode. Posledný bod sa nakoniec spojí s prvým a celý mnohouholník sa vyfarbí zvolenou farbou výplne:
platno.create_polygon(x1,y1, x2,y2, x3,y3,... xn,yn, fill=farba_vyplne, outline=farba_ohranicenia, width=sirka_ohranicenia)
trojuholnik

Príklad: trojuholník a päťuholník

import tkinter

okno = tkinter.Tk()
okno.title("Moja prvá aplikácia")
okno.geometry("500x400")

platno = tkinter.Canvas(okno, width=400, height=300, bg="white")
platno.pack(pady=20)

# Kreslenie trojuholníka
platno.create_polygon(200, 100, 280, 130, 250, 150, fill="silver", outline="grey", width=1)

# Kreslenie 5-uholníka
A = (250,50)
B = (270,50)
C = (280,80)
D = (250,110)
E = (240,100)
platno.create_polygon(A,B,C,D,E, fill="beige", outline="white", width=1)

okno.mainloop()

3. Text

Na plátno môžeme dať vykresliť aj text, pričom ho môžme aj nakloniť (parameter angle). Pri udávaní pozície textu stanovujeme, kde bude umiestnený stred textu.
platno.create_text(x_stred, y_stred, text=co_vypisovat, font=("Arial",12,"bold"), fill=farba, angle=uhol_natocenia)
import tkinter

okno = tkinter.Tk()
okno.title("Moja prvá aplikácia")
okno.geometry("500x400")

platno = tkinter.Canvas(okno, width=400, height=300, bg="white")
platno.pack(pady=20)

# Kreslenie textu
platno.create_text(80, 200, text="Ahoj, píšem text", font=("Arial", 14), fill="blue", angle=45)

okno.mainloop()

Príklady

Rôzne útvary

import tkinter

okno = tkinter.Tk()
okno.title("Moja prvá aplikácia")
okno.geometry("500x500")

platno = tkinter.Canvas(okno, width=400, height=400, bg="darkblue")
platno.pack(pady=50)

platno.create_oval(100,100,350,350, fill="yellow")
platno.create_rectangle(50,100,300,300, fill="green")
platno.create_polygon(100,250,350,250,200,50, fill="red")

okno.mainloop()

Výstup:

utvary

Úlohy na vlastnú prácu

Úloha 1: Vytvorte obrázok podľa predlohy:

domcek

Pomôcka:
Nakreslite si na štvorčekovaný papier a odčítajte súradnice význačných bodov pri definovaní útvarov, z ktorých je obrázok zložený. Pozor na poradie vykresľovania.

Úloha 2: Nakreslite jednu z vlajok

vlajky

Tip:
Pokúste sa vlajku vykresliť čo najmenším počtom príkazov.

Úloha 3: Vykreslite dopravnú značku

znacky

Poznámka:
Značky nemusia byť zaoblené a ani ohraničené čiernou čiarou.

Overenie vedomostí

Test - Grafika v Pythone (knižnica tkinter)

1. Ktorý príkaz správne vytvorí hlavné okno aplikácie v tkinter?

a) window = tkinter.Window()
b) app = tkinter.Application()
c) root = tkinter.Tk()
d) main = tkinter.Main()

2. Aký je účel metódy mainloop() v tkinter aplikácii?

a) Zatvorí aplikáciu.
b) Spustí hlavný cyklus aplikácie, ktorý čaká na používateľské vstupy.
c) Inicializuje grafické rozhranie.
d) Vytvorí nové okno.

3. Ktorý widget sa používa na kreslenie grafických prvkov v tkinter?

a) tkinter.Graphics
b) tkinter.Draw
c) tkinter.Canvas
d) tkinter.Paint

4. Ktorý príkaz sa používa na vytvorenie obdĺžnika na plátne?

a) platno.rectangle(x1,y1,x2,y2)
b) platno.draw_rectangle(x1,y1,x2,y2)
c) platno.create_rectangle(x1,y1,x2,y2)
d) platno.add_rectangle(x1,y1,x2,y2)

5. Ktorý parameter sa používa na nastavenie farby výplne geometrického útvaru?

a) width
b) color
c) bg
d) fill

6. Aký príkaz sa používa na pridanie textu na plátno?

a) platno.create_text(x,y,text="Ahoj")
b) platno.write_text(x,y,text="Ahoj")
c) platno.text(x,y,text="Ahoj")
d) platno.add_text(x,y,text="Ahoj")

7. Koľko vrcholov má mnohouholník vykreslený pomocou príkazu platno.create_polygon(10,10,30,10,50,40,10,70)?

a) 8
b) 6
c) 4
d) 3

8. Ktorý parameter sa používa na nastavenie hrúbky čiary?

a) thickness
b) size
c) width
d) height

9. Aké sú rozmery obdĺžnika, ktorý sa vykreslí po použití príkazu 

platno.create_rectangle(100,50,200,100,fill="green")?

a) šírka 50, výška 100
b) šírka 150, výška 300
c) šírka 300, výška 150
d) šírka 100, výška 50

10. Čo bude vidno na plátne po spustení programu s príkazmi:

platno.create_oval(100,100,200,200,fill="red")
platno.create_rectangle(100,100,200,200,fill="blue")

a) červený kruh a v ňom modrý štvorec
b) modrý štvorec
c) modrý štvorec a v ňom červený kruh
d) červený kruh


Späť na hlavnú stránku