Grafika v tkinteri

Modul tkinter je súčasťou Pythonu a umožňuje vytvárať programy s oknami: kresliť na plátno, reagovať na klikanie myšou a klávesy, robiť animácie a používať tlačidlá či textové polia. Grafické úlohy patria k typickým úlohám praktickej maturity z informatiky. Na Mente beží tkinter v simulácii priamo v prehliadači; obrázky okien v týchto poznámkach vznikli spustením ukážok v tej istej simulácii.

Čo sa naučíš

• vytvoriť okno s plátnom a rozumieť súradniciam plátna,
• kresliť čiary, obdĺžniky, elipsy, mnohouholníky, oblúky a text,
• meniť nakreslené objekty (presun, farba, zmazanie),
• reagovať na kliknutie myšou a stlačenie klávesu,
• animovať pomocou after,
• používať tlačidlo (Button), textové pole (Entry) a nápis (Label).

1Okno a plátno

Každý program s grafikou má rovnakú kostru:

Spustiť

1import tkinter

2​

3okno = tkinter.Tk() # hlavné okno

4okno.title("Prvé okno")

5platno = tkinter.Canvas(okno, width=300, height=120, bg="white")

6platno.pack() # umiestni plátno do okna

7​

8# sem príde kreslenie

9​

10okno.mainloop() # okno čaká na udalosti

Prázdne okno s plátnom:

• tkinter.Tk() vytvorí okno.
• tkinter.Canvas(...) vytvorí plátno (canvas) zadanej šírky a výšky, bg je farba pozadia.
• pack() plátno do okna umiestni – bez neho by sa nezobrazilo.
• mainloop() spustí čakanie na udalosti (kliky, klávesy, časovače). Bez neho by sa okno v bežnom Pythone hneď zavrelo. Patrí na koniec programu.

Často sa používa aj skrátený zápis bez premennej okno: platno = tkinter.Canvas(width=300, height=120) a na konci platno.mainloop() – okno sa vtedy vytvorí automaticky.

1.1Súradnice

Poloha na plátne sa zadáva súradnicami x a y v pixeloch. Počiatok (0, 0) je v ľavom hornom rohu; x rastie doprava a y rastie nadol – opačne ako v matematike.

Bod (150, 75) je teda 150 pixelov od ľavého okraja a 75 pixelov od horného okraja. Stred plátna šírky w a výšky h má súradnice (w / 2, h / 2).

2Kreslenie

Kresliace metódy plátna sa začínajú create_. Ich prvé argumenty sú súradnice, za nimi nasledujú pomenované nastavenia (farba, hrúbka…).

Farby sa zadávajú anglickým menom ("red", "gold", "lightblue", "darkgreen"…) alebo kódom "#RRGGBB" – červená, zelená a modrá zložka v šestnástkovej sústave ("#ff0000" je červená, "#808080" sivá).

2.1Semafor

Spustiť

1import tkinter

2​

3platno = tkinter.Canvas(width=200, height=230, bg="white")

4platno.pack()

5​

6platno.create_rectangle(70, 10, 130, 190, fill="#333333", width=2)

7platno.create_oval(80, 20, 120, 60, fill="red")

8platno.create_oval(80, 80, 120, 120, fill="#553300")

9platno.create_oval(80, 140, 120, 180, fill="#004400")

10platno.create_line(100, 190, 100, 225, width=6)

11platno.create_text(150, 40, text="Stoj!", anchor="w", font=("Arial", 12, "bold"))

12​

13platno.mainloop()

Okno programu:

Kruh nakreslíme ako elipsu vpísanú do štvorca: kruh so stredom (sx, sy) a polomerom r je create_oval(sx - r, sy - r, sx + r, sy + r). Tento vzťah sa v úlohách používa neustále.

2.2Mnohouholník a text

Spustiť

1import tkinter

2​

3platno = tkinter.Canvas(width=320, height=150, bg="white")

4platno.pack()

5​

6# trojuholník: tri vrcholy

7platno.create_polygon(20, 130, 90, 20, 160, 130,

8 fill="lightgreen", outline="darkgreen")

9# päťcípa hviezda: 10 vrcholov

10platno.create_polygon(240, 15, 255, 55, 300, 55, 263, 80, 278, 125,

11 240, 98, 202, 125, 217, 80, 180, 55, 225, 55,

12 fill="gold", outline="orange", width=2)

13platno.create_text(90, 145, text="trojuholník", font=("Arial", 10))

14platno.create_text(240, 145, text="hviezda", font=("Arial", 10))

15​

16platno.mainloop()

Okno programu:

create_polygon dostane súradnice všetkých vrcholov za sebou a posledný vrchol sám spojí s prvým. Predvolená výplň mnohouholníka je čierna, preto fill zadávame vždy.

2.3Kreslenie v cykle

Sila programovania sa ukáže, keď kreslíme cyklom. Terč – sústredné kruhy so spoločným stredom a zmenšujúcim sa polomerom:

Spustiť

1import tkinter

2​

3platno = tkinter.Canvas(width=220, height=220, bg="white")

4platno.pack()

5​

6sx, sy = 110, 110

7farby = ["white", "black", "#3399ff", "red", "gold"]

8for i in range(5):

9 r = 100 - i * 20

10 platno.create_oval(sx - r, sy - r, sx + r, sy + r,

11 fill=farby[i], outline="gray")

12​

13platno.mainloop()

Okno programu:

Šachovnica – dva vnorené cykly cez riadky a stĺpce; farba políčka závisí od toho, či je súčet riadku a stĺpca párny:

Spustiť

1import tkinter

2​

3platno = tkinter.Canvas(width=220, height=220, bg="white")

4platno.pack()

5​

6d = 25 # veľkosť políčka

7for riadok in range(8):

8 for stlpec in range(8):

9 x = 10 + stlpec * d

10 y = 10 + riadok * d

11 farba = "wheat" if (riadok + stlpec) % 2 == 0 else "saddlebrown"

12 platno.create_rectangle(x, y, x + d, y + d, fill=farba, outline="")

13​

14platno.mainloop()

Okno programu:

2.4Oblúky: koláčový graf

create_arc kreslí časť elipsy. Uhol start sa meria v stupňoch od smeru „na tri hodiny“ proti smeru hodinových ručičiek, extent je veľkosť výseku v stupňoch. Výseky koláčového grafu teda začínajú tam, kde predchádzajúci skončil:

Spustiť

1import tkinter

2​

3hlasy = {"A": 45, "B": 30, "C": 15, "D": 10} # percentá

4farby = ["#3366cc", "#dc3912", "#ff9900", "#109618"]

5​

6platno = tkinter.Canvas(width=320, height=200, bg="white")

7platno.pack()

8​

9start = 0

10for i, (strana, p) in enumerate(hlasy.items()):

11 uhol = p * 360 / 100

12 platno.create_arc(20, 20, 180, 180, start=start, extent=uhol,

13 fill=farby[i], outline="white")

14 platno.create_rectangle(210, 40 + i * 30, 225, 55 + i * 30, fill=farby[i])

15 platno.create_text(235, 47 + i * 30, text=f"{strana}: {p} %", anchor="w")

16 start += uhol

17​

18platno.mainloop()

Okno programu:

2.5Náhodné kreslenie

S modulom random sa dajú kresliť náhodné obrázky – napríklad hviezdna obloha z bodiek s náhodnou polohou a veľkosťou:

Spustiť

1import tkinter

2import random

3​

4platno = tkinter.Canvas(width=320, height=160, bg="midnightblue")

5platno.pack()

6​

7for _ in range(80):

8 x = random.randint(0, 320)

9 y = random.randint(0, 160)

10 r = random.randint(1, 3)

11 platno.create_oval(x - r, y - r, x + r, y + r, fill="white", outline="")

12platno.create_oval(250, 20, 290, 60, fill="lightyellow", outline="")

13​

14platno.mainloop()

Okno programu:

Náhodnú farbu zo zoznamu vyberie random.choice(["red", "blue", "green"]). Úplne náhodnú farbu vytvoríš z troch náhodných zložiek: f"#{random.randint(0, 255):02x}{random.randint(0, 255):02x}{random.randint(0, 255):02x}" (formát 02x zapíše číslo dvoma šestnástkovými ciframi).

3Práca s nakreslenými objektmi

Každá metóda create_… vráti číslo objektu (id). Pomocou neho môžeme objekt neskôr zmeniť:

Spustiť

1import tkinter

2​

3platno = tkinter.Canvas(width=300, height=120, bg="white")

4platno.pack()

5​

6lopta = platno.create_oval(20, 40, 60, 80, fill="red")

7napis = platno.create_text(150, 20, text="pôvodne")

8tien = platno.create_oval(20, 40, 60, 80, outline="gray") # pôvodná poloha

9​

10platno.move(lopta, 180, 20) # posun doprava a nadol

11platno.itemconfig(lopta, fill="orange")

12platno.itemconfig(napis, text="po move a itemconfig")

13print("nové súradnice lopty:", platno.coords(lopta))

14​

15platno.mainloop()

Okno programu:

Výstup v konzole:

nové súradnice lopty: [200.0, 60.0, 240.0, 100.0]

4Udalosti: myš a klávesnica

Grafický program väčšinu času čaká na udalosť – kliknutie, stlačenie klávesu. Na udalosť zareaguje funkcia, ktorú si k udalosti „priviažeme“ metódou bind. Takejto funkcii sa hovorí obsluha udalosti; Python ju zavolá a ako argument jej odovzdá objekt event s informáciami o udalosti.

4.1Kliknutie myšou

Spustiť

1import tkinter

2​

3platno = tkinter.Canvas(width=300, height=140, bg="white")

4platno.pack()

5pocet = 0

6info = platno.create_text(10, 125, text="Klikni do plátna.", anchor="w")

7​

8def klik(event):

9 global pocet

10 pocet += 1

11 x, y = event.x, event.y

12 platno.create_rectangle(x - 5, y - 5, x + 5, y + 5, fill="blue")

13 platno.itemconfig(info, text=f"Počet kliknutí: {pocet}, posledné: ({x}, {y})")

14​

15platno.bind("<Button-1>", klik)

16platno.mainloop()

Okno programu:

• "<Button-1>" je kliknutie ľavým tlačidlom ("<Button-3>" pravým).
• event.x a event.y sú súradnice miesta kliknutia na plátne.
• Pri bind píšeme meno funkcie bez zátvoriek – funkciu nevoláme my, zavolá ju tkinter pri každom kliknutí.
• Obsluha udalosti musí mať parameter event, aj keď ho nepoužije.
• Počítadlo pocet je globálna premenná, ktorú funkcia mení – preto global pocet. (V jednoduchých grafických programoch je to bežné riešenie.)

Ďalšie udalosti myši: "<B1-Motion>" – ťahanie so stlačeným tlačidlom (hodí sa na kreslenie „perom“), "<ButtonRelease-1>" – pustenie tlačidla, "<Double-Button-1>" – dvojklik.

4.2Klávesy

Klávesy zachytávame pomocou bind_all (udalosť príde bez ohľadu na to, ktorá časť okna je aktívna). Šípky majú mená "<Left>", "<Right>", "<Up>", "<Down>"; ľubovoľný kláves zachytí "<Key>" a jeho meno je v event.keysym:

Spustiť

1import tkinter

2​

3platno = tkinter.Canvas(width=300, height=150, bg="white")

4platno.pack()

5lopta = platno.create_oval(20, 20, 50, 50, fill="green")

6popis = platno.create_text(150, 135, text="Ovládaj šípkami.")

7KROK = 30

8​

9def vpravo(event):

10 platno.move(lopta, KROK, 0)

11​

12def vlavo(event):

13 platno.move(lopta, -KROK, 0)

14​

15def hore(event):

16 platno.move(lopta, 0, -KROK)

17​

18def dole(event):

19 platno.move(lopta, 0, KROK)

20​

21def iny_klaves(event):

22 platno.itemconfig(popis, text=f"Stlačený kláves: {event.keysym}")

23​

24platno.bind_all("<Right>", vpravo)

25platno.bind_all("<Left>", vlavo)

26platno.bind_all("<Up>", hore)

27platno.bind_all("<Down>", dole)

28platno.bind_all("<Key-a>", iny_klaves)

29platno.mainloop()

Okno programu:

(Obrázok ukazuje stav po stlačení klávesov →, →, →, ↓, ↓ a a.)

5Animácia: after

Animácia je séria malých zmien v krátkych časových odstupoch. V tkinteri na to slúži metóda after(ms, funkcia): naplánuje zavolanie funkcie o zadaný počet milisekúnd. Animačná funkcia urobí jeden krok a na konci si naplánuje sama seba znova – vznikne „cyklus“, ktorý však okno nezablokuje:

Spustiť

1import tkinter

2​

3platno = tkinter.Canvas(width=300, height=150, bg="white")

4platno.pack()

5lopta = platno.create_oval(10, 60, 40, 90, fill="red")

6dx, dy = 6, 4 # rýchlosť: o koľko sa posunie za jeden krok

7​

8def krok():

9 global dx, dy

10 platno.move(lopta, dx, dy)

11 x1, y1, x2, y2 = platno.coords(lopta)

12 if x1 <= 0 or x2 >= 300: # náraz do ľavej alebo pravej steny

13 dx = -dx

14 if y1 <= 0 or y2 >= 150: # náraz hore alebo dole

15 dy = -dy

16 platno.after(30, krok) # ďalší krok o 30 ms

17​

18krok()

19platno.mainloop()

Okno programu po 1,5 s:

Loptička sa každých 30 ms posunie o (dx, dy). Keď narazí na okraj, zmení sa znamienko príslušnej rýchlosti – odrazí sa. Obrázok ukazuje stav po 1,5 sekunde.

5.1Zmena farby v čase

Časovač nemusí iba posúvať – môže meniť ľubovoľnú vlastnosť. Blikajúci nápis:

Spustiť

1import tkinter

2​

3platno = tkinter.Canvas(width=300, height=80, bg="white")

4platno.pack()

5napis = platno.create_text(150, 40, text="POZOR", fill="red",

6 font=("Arial", 28, "bold"))

7farby = ["red", "orange"]

8index = 0

9​

10def blikaj():

11 global index

12 index = (index + 1) % len(farby)

13 platno.itemconfig(napis, fill=farby[index])

14 platno.after(500, blikaj)

15​

16blikaj()

17platno.mainloop()

Okno programu po 1,2 s:

Zvyšok po delení (% len(farby)) zabezpečí, že sa index točí dookola: 0, 1, 0, 1…

6Tlačidlá, textové polia a nápisy

Okrem plátna má tkinter aj ďalšie prvky okna (widgety). Najpoužívanejšie:

Každý prvok treba umiestniť – pack() ich ukladá pod seba v poradí, v akom sa zavolá.

Spustiť

1import tkinter

2​

3okno = tkinter.Tk()

4okno.title("Pozdrav")

5​

6tkinter.Label(okno, text="Ako sa voláš?").pack()

7pole = tkinter.Entry(okno)

8pole.pack()

9vysledok = tkinter.Label(okno, text="")

10​

11def pozdrav():

12 meno = pole.get().strip()

13 if meno:

14 vysledok.config(text=f"Ahoj, {meno}!")

15 else:

16 vysledok.config(text="Najprv napíš meno.")

17​

18tkinter.Button(okno, text="Pozdrav", command=pozdrav).pack()

19vysledok.pack()

20okno.mainloop()

Okno programu:

(Obrázok: do poľa sa napísalo „Ema“ a stlačilo sa tlačidlo Pozdrav.)

Text z Entry je vždy reťazec – ak s ním chceš počítať, preveď ho (int(pole.get())) a ošetri neplatný vstup (try – except, téma Výnimky).

6.1Tlačidlá a plátno spolu

Spustiť

1import tkinter

2​

3okno = tkinter.Tk()

4okno.title("Počítadlo")

5platno = tkinter.Canvas(okno, width=240, height=90, bg="white")

6platno.pack()

7hodnota = 0

8text = platno.create_text(120, 45, text="0", font=("Arial", 32, "bold"))

9​

10def zmen(o_kolko):

11 global hodnota

12 hodnota += o_kolko

13 platno.itemconfig(text, text=str(hodnota))

14​

15tkinter.Button(okno, text="+", command=lambda: zmen(1)).pack()

16tkinter.Button(okno, text="−", command=lambda: zmen(-1)).pack()

17okno.mainloop()

Okno programu:

command musí byť funkcia bez parametrov. Ak potrebujeme zavolať funkciu s argumentom, obalíme volanie do lambda: zmen(1) – to je krátka funkcia bez parametrov, ktorá pri stlačení tlačidla zavolá zmen(1).

7Časté chyby

• Chýbajúce pack() – plátno alebo tlačidlo sa nezobrazí.
• Chýbajúce mainloop() – v bežnom Pythone sa okno hneď zavrie (alebo sa vôbec neukáže).
• Os y smeruje nadol – „vyššie“ na obrazovke znamená menšie y.
• command=funkcia() namiesto command=funkcia – so zátvorkami sa funkcia zavolá hneď pri vytváraní tlačidla, nie pri stlačení.
• Obsluha udalosti bez parametra: def klik(): pri bind skončí chybou – musí byť def klik(event):.
• Zabudnuté global – funkcia, ktorá mení globálnu premennú (počítadlo, rýchlosť), potrebuje global meno.
• Animácia cez while a sleep – okno zamrzne; použi after.
• Text z Entry je reťazec – na počítanie ho preveď na číslo.

Zhrnutie

• Kostra: import tkinter, Canvas(width=…, height=…), pack(), kreslenie, mainloop().
• Súradnice: (0, 0) vľavo hore, x doprava, y nadol; kruh: create_oval(sx - r, sy - r, sx + r, sy + r).
• create_line, create_rectangle, create_oval, create_polygon, create_arc, create_text; nastavenia fill, outline, width, font, anchor.
• create_… vráti id; move, coords, itemconfig, delete objekt menia.
• Udalosti: platno.bind("<Button-1>", f), platno.bind_all("<Left>", f); def f(event): a event.x, event.y, event.keysym.
• Animácia: funkcia urobí krok a zavolá platno.after(ms, funkcia).
• Button(…, command=f), Entry + get(), Label + config(text=…).

Úlohy na precvičenie

1. Nakresli slovenskú vlajku bez znaku: tri vodorovné pruhy (biely, modrý, červený).
2. Nakresli rad 10 kruhov rovnakej veľkosti, ktorých farba sa strieda medzi červenou a modrou.
3. Po každom kliknutí nakresli na mieste kliknutia náhodne veľký kruh náhodnej farby.
4. Naprogramuj štvorec, ktorý sa pohybuje zľava doprava, a keď zmizne vpravo, objaví sa opäť vľavo.
5. Vytvor okno s textovým poľom a tlačidlom: po stlačení tlačidla nakresli na plátno toľko štvorcov vedľa seba, koľko je zadané v poli.
6. Pomocou "<B1-Motion>" naprogramuj jednoduché kreslenie: pri ťahaní myšou sa kreslia malé bodky.