Kreslení – Canvas (Tkinter)

Doposud jsme pomocí programů počítali nebo vypisovali textové zprávy.

Teď se naučíme kreslit grafické prvky pomocí widgetu Canvas, který je součásti knihovny Tkinter (o ní si povíme dále, při návrhu GUI). Tkinter je jednoduchá knihovna v Pythonu, která nám umožní stavět okna s tlačítky, textovými poli a dalšími prvky, díky kterým budou naše aplikace přístupnější a uživatelsky přívětivější.

Widget Canvas umožňuje vytvářet čáry, kruhy, obdélníky, obrázky a další grafické prvky.

Zdroj obrázku: https://www.educba.com/python-tkinter-canvas/

Základní struktura Tkinter – vytvoření okna

Každá aplikace s GUI potřebuje hlavní okno, kam umístíme všechny další prvky. Tkinter nabízí funkci Tk(), která vytvoří právě toto hlavní okno. Tomuto oknu se říká root.

Nejprve si tedy importujeme Tkinter, vytvoříme hlavní okno a spustíme hlavní smyčku.

Když spustíme tento kód, uvidíme prázdné okno.

import tkinter as tk  # Importujeme knihovnu Tkinter a říkáme jí 'tk'

# Vytvoříme hlavní okno
root= tk.Tk()  # Hlavní okno, do kterého budeme přidávat prvky
root.title("MěSOŠ aplikace")  # Nastavíme název okna

Základní použití Canvas

Widget Canvas je jako malířské plátno, na které můžeme kreslit různé tvary. Pro použití je nutné vytvořit instanci třídy Canvas, přidat ji do okna a pomocí metod jako create_line, create_rectangle nebo create_oval nakreslit tvary.

Nejdříve si musíme vytvořit plátno, na které budeme kreslit. Naimportujeme knihovnu tkinter jako tk, vytvoříme hlavní okno aplikace a vytvoříme plátno.

Do proměnné platno přiřadíme instanci Canvas, kterou nastavíme do hlavního okna (root), následně můžeme nastavit šířku, výšku, barvu.

• width a height určují šířku a výšku plátna.
• bg nastavuje barvu pozadí plátna

import tkinter as tk

# Vytvoření hlavního okna aplikace
root = tk.Tk()
root.title("Kreslení na Canvas")

# Vytvoření Canvas
platno = tk.Canvas(root, width=400, height=300, bg="white")
platno.pack()

# Nakreslení čáry
platno.create_line(50, 50, 350, 250, fill="blue", width=3)

# Spuštění hlavní smyčky
root.mainloop()

Plocha v Canvas

Pro umístění prvků musíme porozumět, jak funguje plocha v Canvas – resp. souřadnicová soustava.

V matematice začíná souřadnicová soustava vždy ve středu. Na počítači leží bod se souřadnicemi [0, 0] v levém horním rohu.

Osa x jde zleva doprava, osa y shora dolů – čím vyšší číslo, tím je níže (rozdíl oproti matematice).

V příkazech se používají souřadnice protilehlých vrcholů objektu (obdelník, čára..)

Takže souřadnice x1, y1 a x2, y2 můžeme znázornit takhle:

Čára

Vytvoříme jednoduchý program, který zobrazí čáru na plátně. Použijeme metodu create_line. Čára je definována dvěma nebo více body, mezi nimiž je nakreslen spojitý úsek. Souřadnice x1,y1 nám značí počáteční bod čáry; x2,y2 koncový bod čáry.

• create_line(x1, y1, x2, y2, ...) nakreslí čáru mezi souřadnicemi (x1, y1) a (x2, y2)
• fill určuje barvu čáry
• width nastavuje tloušťku čáry

import tkinter as tk

# Vytvoření hlavního okna aplikace
root = tk.Tk()
root.title("Kreslení na Canvas")

# Vytvoření Canvas
platno = tk.Canvas(root, width=400, height=300, bg="white")
platno.pack()

# Nakreslení čáry
platno.create_line(50, 50, 350, 250, fill="blue", width=3)

# Spuštění hlavní smyčky
root.mainloop()

Můžeme nakreslit i čárkovanou čáru pomocí parametru dash. Ten definuje jednotlivou délku jednotlivých čárek a mezer mezi nimi.

• dash=(d1, d2) nám značí délku čárek a mezery mezi nimi. Takže například (5, 3) značí čárku dlohou 5 pixelů a mezeru dlouhou 3 pixely.

platno.create_line(50, 50, 350, 250, fill="red", width=2, dash=(5, 3))

Pokud chceme čáru zakončit šipkou na začátku, na konci nebo po obou stranách, použijeme parametr arrow.

• arrow="last" přidá šipku na konec čáry.
  arrow="first" přidá šipku na začátek čáry.
  arrow="both" přidá šipky na oba konce čáry.

platno.create_line(50, 150, 350, 150, fill="blue", width=2, arrow="both")

Obdélník

Obdélníky jsou jedním ze základních tvarů. Pro jejich nakreslení používáme metodu create_rectangle. Každý obdélník je definován dvěma rohy – levým horním a pravým dolním. Tyto rohy určujeme pomocí souřadnic (x1, y1) a (x2, y2).

• x1, y1: Souřadnice levého horního rohu obdélníku.
• x2, y2: Souřadnice pravého dolního rohu obdélníku.

platno.create_rectangle(x1, y1, x2, y2)

platno.create_rectangle(30, 50, 80, 100)

Můžeme využít i další parametry

• fill barvy výplně
• outline barva obrysu
• width tloušťka obrysu (výchozí je 1)

platno.create_rectangle(100, 100, 200, 200, fill="red", outline="black", width=2)

Automatické generování více obdélníků

Pokud potřebujeme vytvořit větší množství obdélníků, můžeme jejich parametry vypočítávat automaticky, například pomocí cyklu. V následujícím příkladu vykreslíme řadu obdélníků vedle sebe.

Použijeme for cyklus k postupnému výpočtu souřadnic, kdy každý obdélník má posunutý levý horní roh o pevnou vzdálenost

for i in range(5):
    x1 = 50 + i * 60  # Posun levého horního rohu
    y1 = 100
    x2 = x1 + 50  # Šířka obdélníku 50 pixelů
    y2 = 150  # Výška obdélníku 50 pixelů
    platno.create_rectangle(x1, y1, x2, y2, fill="orange", outline="black", width=2)

Akce uživatele

V Canvas můžeme interaktivně zpracovávat vstup na základě uživatelských akcí – např. kliknutí myší, pohyb myší.

Tyto akce zpracováváme pomocí událostí, které propojujeme s příslušnými funkcemi.

Můžeme například pracovat s následujícími událostmi:

• <Button-1> – kliknutí levým tlačítkem myši
• <B1-Motion> – pohyb myší při stisknutém levém tlačítku
• <ButtonRelease-1> – uvolnění levého tlačítka

Každá z těchto událostí nese informace o aktuální poloze myši (event.x, event.y), které můžeme využít.

Interaktivní objekty

Můžeme například vytvořit interaktivní objekty, které reagují na události uživatele (např. kliknutí myší).

Používáme metodu tag_bind, která umožní přiřadit konkrétnímu objektu na plátně (např. obdélníku) nějakou akci.

V našem příkladu změníme barvu určitého obdélníku, po kliknutí na obdélník.

Nejprve si jednotlivé obdélníky nadefinujeme do proměnných

obd1 = platno.create_rectangle(x-75, y-50, x+75, y+50, fill="red")
obd2 = platno.create_rectangle(x-200, y-200, x-150, y-150, fill="blue")

Následně vytvoříme definice funkcí pro změnu barvy. Jako vstupní parametr bude objekt event. Ten obsahuje informace o uživatelské akci (kliknutí myši, pohyb myši, stisk klávesy…). Tento objekt se automaticky předává do funkcí, které jsou volány při zpracování událostí.

Ve funkci použijeme metodu itemconfig(). Prvním parametrem je identifikátor objektu (tzv. tag nebo id), následně jednotlivé parametry objektu (např. barva…)

def zmen_na_cernou(event):
    platno.itemconfig(obd1, fill="black")

def zmen_na_zelenou(event):
    platno.itemconfig(obd2, fill="green")

V těle programu nám zbývá už jen propojit události s jednotlivými objekty.

V instanci s plátnem zavoláme metodu tag_bind(), která má tři vstupní parametry – identifikátor objektu, sekvenci (typ události), funkci spouštějící se při události.

platno.tag_bind(obd1, "<Button-1>", zmen_na_cernou)
platno.tag_bind(obd2, "<Button-1>", zmen_na_zelenou)

import tkinter as tk
root = tk.Tk()
root.title("Kreslení na Canvas")

platno = tk.Canvas(root, width=400, height=400, bg="white")
platno.pack()

def zmen_na_cernou(event):
    platno.itemconfig(obd1, fill="black")

def zmen_na_zelenou(event):
    platno.itemconfig(obd2, fill="green")


x = 200
y = 200

obd1 = platno.create_rectangle(x-75, y-50, x+75, y+50, fill="red")
obd2 = platno.create_rectangle(x-200, y-200, x-150, y-150, fill="blue")

platno.tag_bind(obd1, "<Button-1>", zmen_na_cernou)
platno.tag_bind(obd2, "<Button-1>", zmen_na_zelenou)

root.mainloop()

Zdroje