4. Grafická plocha, obdĺžniky

Zopakujme si:

  • program sa nachádza v súbore

  • v každom riadku je jeden príkaz (priradenie alebo výpis) 1

  • program môže obsahovať komentáre aj prázdne riadky 2

  • ak riadok obsahuje nejakú hodnotu alebo výraz, ktorý sa nepriradí do premennej ani nie je parametrom v print(), takáto hodnota sa ignoruje 3

V tejto téme sa naučíme vytvárať program (textový súbor s príkazmi), ktorý bude kresliť do grafickej plochy. Zatiaľ sme sa naučili vypisovať texty a číselné hodnoty do textovej plochy (okno Shell) pomocou príkazu print. Na kreslenie do grafickej plochy budeme potrebovať viac rôznych príkazov.

Vytvorme si plátno

Skôr ako začneme kresliť, musíme použiť príkazy na vytvorenie grafickej plochy. Nasledovná postupnosť príkazov vytvorí grafické okno, v ktorom sa bude nachádzať plocha (tzv. plátno) určená na kreslenie. Najjednoduchší variant vytvorenia grafickej plochy s plátnom je 4:

import tkinter

platno = tkinter.Canvas()
platno.pack()

Spustíme a vidíme:

_images/04_01.png

Všimnite si grafickú aplikáciu. Táto sa správa rovnako ako iné bežné aplikácie: samotné okno môžeme presúvať aj mu meniť veľkosť ťahaním. Vnútro grafického okna je šedé: to je plátno, na ktoré budeme kresliť. Túto aplikáciu zatvoríme rovnako ako iné aplikácie, kliknutím na tlačidlo x v pravom hornom rohu.

Ďalej sa budeme postupne zoznamovať s grafickými príkazmi, ktoré všetky majú takýto tvar:

platno.create_utvar(parametre)

Každý takýto príkaz nakreslí do plátna nejaký útvar. Aký útvar sa nakreslí, určuje meno v príkaze create_. Napr. create_rectangle nakreslí obdĺžnik, create_line nakreslí úsečku a create_text vloží do grafickej plochy nejaký text. Parametre príkazu určujú detaily kresleného útvaru, napr. pozíciu, farbu, hrúbku a pod. 5

Príkaz na kreslenie obdĺžnikov

Základný tvar príkazu na nakreslenie obdĺžnikov je:

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

kde 4 parametre x1, y1, x2 a y2 označujú súradnice kresleného obdĺžnika:

_images/04_02.png

Vidíte, že obdĺžnik má strany rovnobežné so stranami grafickej plochy. Prvé dva parametre x1, y1 označujú súradnice ľavého horného vrcholu obdĺžnika a x2, y2 pravého dolného vrcholu.

Súradnicová sústava

Musíme rozumieť, ako v Pythone funguje sústava súradníc. x-ová os ide zľava doprava, pričom prechádza po hornej hrane grafickej plochy. y-ová os ide zhora nadol a prechádza po ľavej hrane grafickej plochy. Počiatok (0, 0) je v ľavom hornom rohu:

_images/04_03.png

Všimnite si, že y-ová os je orientovaná opačne, ako sme zvyknutí z matematiky: smerom nadol sú kladné hodnoty a smerom nahor (nad počiatok (0, 0)) sú to záporné hodnoty.

Teraz už môžeme zapísať náš prvý grafický program, ktorý bude kresliť obdĺžnik:

# prvy graficky program

import tkinter

platno = tkinter.Canvas()
platno.pack()

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

ktorý vytvorí takúto kresbu:

_images/04_04.png

Preskúmajte, čo v tomto programe znamenajú číslené konštanty 50, 70, 220, 150: prvá dvojica čísel 50 a 70 označujú súradnice ľavého horného rohu, teda bod (50, 70) (kde 50 je x-ová súradnica tude vzdialenosť 50 jednotiek od ľavého okraja a 70 je y-ová súradnica, teda koľko jednotiek od horného okraja). Druhá dvojica čísel (220, 150) označuje súradnice pravého dolného bodu. Uvedomte si, že šírka obdĺžnika sa počíta ako rozdiel (vzdialenosť) x-ových súradníc a výška ako rozdiel y-ových súradníc. Teda rozmery tohto obdĺžnika sú 170 (šírka) a 80 (výška).

Obdĺžnikov môžeme nakresliť aj viac a môžu sa aj rôzne prekrývať:

# prvy graficky program

import tkinter

platno = tkinter.Canvas()
platno.pack()

platno.create_rectangle(50, 70, 220, 150)
platno.create_rectangle(60, 80, 130, 140)
platno.create_rectangle(160, 90, 230, 160)

a teraz to vyzerá takto:

_images/04_05.png

Prepočítajme ešte rozmery týchto troch obdĺžnikov:

  • prvý obdĺžnik platno.create_rectangle(50, 70, 220, 150) sme už počítali vyššie a vieme, že jeho rozmery sú 170 x 80 (šírka x výška)

  • druhý obdĺžnik platno.create_rectangle(60, 80, 130, 140) má rozmery 70 x 60 (t.j. 130-60 a 140-80)

  • tretí obdĺžnik platno.create_rectangle(160, 90, 230, 160) má rozmery 70 x 70

Chyby v programe

Čím spoznáme viac programátorských konštrukcií, tým viac sa stretneme s rôznymi typmi chýb. Zatiaľ budú veľmi časté preklepy pri zápise zložitejších konštrukcií. Tu nás najčastejšie upozorní Python, napr. môžeme otestovať v interaktívnom režime:

>>> import tknter
...
ModuleNotFoundError: No module named 'tknter'

Označuje preklep v mene grafického modulu tkinter, opravíme:

>>> import tkinter
>>> platno = tkinter.canvas()
...
AttributeError: module 'tkinter' has no attribute 'canvas'

Slovo Canvas malo mať prvé písmeno veľké, Python je na malé a veľké písmená veľmi citlivý. Opravíme

>>> platno = tkinterCanvas()
...
NameError: name 'tkinterCanvas' is not defined

Medzi slová tkinter a Canvas sme mali vložiť znak . (bodka). Python to teraz pochopil ako jedno dlhé nezrozumiteľné slovo tkinterCanvas. Opravíme a pokračujeme

>>> platno = tkinter.Canvas()
>>> platno.Pack()
...
AttributeError: 'Canvas' object has no attribute 'Pack'

Opäť preklep v slove Pack, ktoré malo byť zapísané malými písmenami:

>>> platno.pack()

Horšie sa odhaľujú chyby s chýbajúcimi zátvorkami. Ak zabudneme zátvorky sa slovom Canvas, dostávame veľmi nezrozumiteľnú správu až v ďalšom príkaze:

>>> platno = tkinter.Canvas
>>> platno.pack()
...
TypeError: pack_configure() missing 1 required positional argument: 'self'

Ešte menej zrozumiteľné je to s chýbajúcimi zátvorkami za slovom pack:

import tkinter
platno = tkinter.Canvas()
platno.pack
platno.create_rectangle(50, 50, 150, 100)

V tomto prípade Python nehlási žiadnu chybu: zápis platno.pack je pre počítač korektným zápisom, lenže tento zápis nezobrazí plátno grafickej plochy a ďalší príkaz create_rectangle kreslí do plátna, ale toto plátno sa zatiaľ nezobrazuje. Teraz by stačilo zadať napr.

>>> platno.pack()

a v grafickom okne vidíme plátno aj s nakresleným obdĺžnikom.


Úlohy

  1. Nakreslite obdĺžnik, ktorého ľavý horný vrchol má súradnice (30, 100), jeho šírka je 300 a výška 50.

  1. Napíšte program, ktorý nakreslí dva rovnako veľké štvorce, ktoré sú umiestnené vedľa seba takto:

    _images/04_06.png

  1. Napíšte program, ktorý nakreslí dva veľké štvorce: jeden so stranou 100 a druhý 150, ktoré majú spoločný stred:

    _images/04_07.png

  1. Napíšte program, ktorý z troch obdĺžnikov 150x50, 100x50 a 50x50 nakreslí takúto pyramídu:

    _images/04_08.png

Zhrnutie

čo sme sa naučili:

  • programy v Pythone môžu pracovať s textovou plochou (výsledky sa dozvedáme pomocou print) alebo s grafickou (do plátna kreslíme pomocou create_rectangle).

  • príkaz create_rectangle na kreslenie obdĺžnikov má prvé štyri parametre číselné (súradnice vrcholov obdĺžnika)

dôležité zásady:

  • pri zadávaní najmä zložitejších zápisov príkazov si treba dávať veľký pozor na zámenu malých a veľkých písmen, prípadne treba skontrovať, či ste nezabudli () tzv. prázdne okrúhle zátvorky


1

Každý príkaz musí začínať už v prvom znaku riadka, t.j. riadok nesmie začínať medzerami.

2

Riadky s komentármi môžu začínať v ľubovoľnom stĺpci. Komentáre môžu byť aj súčasťou riadkov s nejakými príkazmi. Vtedy sa za komentár považuje celý zvyšok riadka

3

Python takýto výraz naozaj vyhodnotí, ale keďže „nevie“ čo s tým, tak ju zahodí. Častou chybou začiatočníka sú práve takéto stratené hodnoty, napr. zahodenie výsledkov volania funkcie

4

Na prácu s plátnom sme tu zvolili premennú s menom platno. V skutočnosti sme mohli použiť ľubovoľné iné meno a ďalej namiesto platno pracovať s týmto menom. Niekedy sa zvykne používať meno canvas alebo grafika, niekedy skrátene aj c alebo g.

5

V tejto aj v ďalších častiach sa budete zoznamovať s väčším počtom príkazov a parametrov. Je vhodné si tieto príkazy zapisovať do nejakej rozumnej tabuľky, aby ste to mali stále na očiach. Bolo by nevhodné, keby ste sa mali toto učiť naspamäť.