testovac.sk

Grafika, kreslenie

Doteraz mal náš program len textový výstup. Ak sme chceli aby nám náš program niečo po spustení "povedal", použili sme príkaz print() a zadali sme mu argumenty - text alebo výpočet, ktorý nám program vypísal.

Teraz si ukážeme inú formu výstupu - grafickú. Náš program bude kresliť! Najprv jednoduché obdĺžniky, neskôr ich bude vedieť aj vyfarbiť, nakresliť elipsu (kružnicu) ale aj obyčajnú čiaru podľa zadaných príkazov.

Balíček na kreslenie

Python v svojej základnej verzii nemá aparát na kreslenie :( Existuje však systém balíčkov (package) - kusov kódu, ktoré už niekto vytoril a dáva nám ho k dispozícii. Balíčky rozširujú množinu príkazov, ktoré môžeme v našom programe použiť. Jedným z nich je balíček na kreslenie - tkinter. Ak ho chceme používať, musíme na začiatok nášho programu napísať niekoľko riadkov (viď nižšie). Nateraz nie je nutné do detailov vedieť čo presne tieto príkazy robia, ak budeme pracovať s kreslením, budú vám k dispozícii. Vytvorte program len s týmito riadkami a spustite. Čo sa stalo?

import tkinter
canvas = tkinter.Canvas()
canvas.pack()
canvas.create_rectangle(50, 70, 220, 150)

Mali by ste vidieť nové okno, ktoré obsahuje obdĺžnik.

tkinter simple output example

pouzitie balicka tkinter

Prvé tri riadky kódu nám sprístupnili balíček na kreslenie, ak chcete vo svojom programe využívať kreslenie, skopírujte si ich na začiatok svojho programu. Ešte raz, riadky, ktoré treba skopírovať na začiatok programu sú:

import tkinter
canvas = tkinter.Canvas()
canvas.pack()

Posledný riadok programu spôsobil nakreslenie obdĺžnika, v kóde ho môžeme použiť viackrát a každý vykreslí nejaký obdĺžnik. Čo znamenajú parametre (tie čísla v zátvorkách) je vysvetlené nižšie...

Kreslíme obdĺžniky

Tento riadok spôsobil vykreslenie obdĺžnika:

canvas.create_rectangle(50, 70, 220, 150)

Pytohn na základe tohoto riadku vedel, presne kam a aký veľký obdĺžnik má nakresliť. Informacia o polohe a rozmeroch obdĺžnika je zakodovaná v parametroch (argumentoch) tohoto príkazu (argumenty sú tie čísla v zátvorke, oddlené čiarkami - podobne ako pri príkaze print).

Argumenty vyjadrujú pozície dvoch bodov, ktoré jednozančne určujú polohu a rozmery obdĺžnika - jeho ľavý horný roh a pravý dolný roh. Oba z týchto bodov majú svoje súradnice, ktoré pozostávajú z dvoch zložiek - x a y. Jednotlivé čísla - argumenty v príkaze canvas.create_rectangle sú: x-ová súradnica ľavého horného rohu, y-ová súradnica ľavého horného rohu, x-ová súradnica pravého dolného rohu a y-ová súradnica pravého dolného rohu obdĺžnika. Náš príkaz teda nakreslil obdĺžnik s ľavým horným rohom so súradnicami [50, 70] a pravým dolným rohom so súradnicami [220, 150]. Pozor! Súranice v Python-e nefungujú ako v matematike...

Súradnicový systém

Súradnicový systém funguje v canvas-e a Python-e inak, ako sme zvyknutí z matematiky. Bod [0, 0] je umiestnený v ľavom hornom rohu plochy, os x rastie zľava doprava a os y rasie zhora nadol. Príklad nižšie: Súradnice na ploche s rozmermi 200x100.

tkinter coordinate system

suradnicovy system v tkinter - https://python-course.eu/images/tkinter/canvas_rectangle_lines_coordinates.png

Canvas presných rozmerov

Pri vytváraní plochy na kreslenie (canvas) môžeme s použitím parametrov špecifikovať, aká veľká bude plocha, na ktorú budeme kresliť. Použijeme pri tom pomenované parametre width a height. Pozri sa na príklad ich použitia nižšie.

canvas = tkinter.Canvas(width=600, height=400)

Nastavenie farby výplne obdĺžnika

S použitím pomenovaného parametra môžeme ľahko nastaviť farbu výplne obdĺžnika.

canvas.create_rectangle(90, 30, 150, 90, fill='green')

V príklade vyššie sme nastavili farbu výplne obdĺžnika na zalenú - green, existuje mnoho ďalších farieb, ktoré majú svoj špecifický názov - pozri tabuľku nižšie.

basic color names

nazvy zakladnych farieb

Pre fajnšmekrov, umelcov a programátorov - dizajnérov: farbu možno špecifikovať aj pomocou RGB modelu, napríklad v hexadecimálnom zápise (viď ukážka nižšie). Kód danej farby sa dá ľahko zistiť napríklad na tejto stránke.

canvas.create_rectangle(90, 30, 150, 90, fill='#FF3399')

práca na hodine a domáca úloha