testovac.sk

Canvas II

S canvasom sa toho dá robiť oveľa viac ako len kresliť obdĺžniky a text...

Použitie canvas

Ak chcem kresliť do canvas, na začiatok programu pridám riadky:

import tkinter

canvas = tkinter.Canvas(width=700, height=350, bg="white")
canvas.pack()

Výšku, šírku a farbu pozadia môžete nastaviť podľa seba alebo ich nastavenie aj vynechať (potom sa použijú prednastavené hodnoty).

Súradnicová sústava

Osi súradnicovej sústavy nie sú ako v matematike! X ide zľava doprava a Y zhora dole!

Obdĺžniky a štvorce

# polohu a veľkosť obdĺžnika určujú súradnice dvoch protiľahlých vrcholov
# ak sú vrcholy napríklad [90, 30] a [150, 90], obdĺžnik nakreslíme takto
canvas.create_rectangle(90, 30, 150, 90, fill='green')

# ak by bol ľavý roh obdĺžnika na súradniciach [x,y], mal výšku 'v' a šírku 's'
canvas.create_rectangle(x, y, x+s, y+v, fill='orange')

Ovály a kruhy

# príkaz na ovál je rovnaký ako pre obdĺžnik, namiesto 'rectangle' stačí napísať 'oval'
# vznikne tak obdĺžnik, ktorý sa vpíše do obdĺžnika, ktorý by inak vznikol
canvas.create_rectangle(90, 30, 150, 90, fill='green')
canvas.create_oval(90, 30, 150, 90, fill='red')

# často kreslíme kruh na základe súradníc stredu [x,y] a polomeru 'r'
canvas.create_oval(x-r, y-r, x+r, y+r, fill='yellow')

Čiary

# jednoduchú čiaru (úsečku) kreslíme zadaním súradníc dvoch koncových bodov
canvas.create_line(10,10, 20, 200)

# bodov môžeme napísať viac, potom vznikne lomená čiara prechádzajúca všetkými bodmi
canvas.create_line(x1, y1, x2, y2, x3, y3, ...)

# čiare môžeme špecifikovať farbu a hrúbku
canvas.create_line(10,10, 20, 200, 10, 270, fill="skyblue", width=4)

Mnohouholníky

# mnohouholníky majú podobný príkaz ako čiary - tiež môžeme napísať súradnice veľa bodov
canvas.create_polygon(10,20, 100,30, 120,150, 30,110, fill='blue')

Obrázky

# do canvasu môžeme importovať aj obrázok zo súboru...
# najprv načítame obrázok ako grafický objekt
premenna = tkinter.PhotoImage(file='nazov suboru')
# potom môžeme vytvoriť objekt v canvas na základe načítaného objektu
canvas.create_image(x, y, image=premenna)

# objekt potom môžeme nakresliť aj viackrát, napríklad takto:
obrazok = tkinter.PhotoImage(file='slimak.png')
for x in range(100, 301, 100):
    canvas.create_image(x, 150, image=obrazok)

Text

canvas.create_text(200, 150, text='hura, programujeme')
# text bude mať stred na súradniciach [200,150]

Vymazanie nakresleného útvaru

Všetky útvary nakreslené do canvas možno dodatočne meniť alebo aj vymazať. Každá funkcia, ktorá v canvas vykreslí objekt vracia celé číslo - špeciálne ID nakresleného objektu. Toto číslo si môžeme uložiť pri vytváraní objektu do premennej a potom ho použiť v špeciálnom príkaze na zmenu objektu, aby canvas vedel, ktorý objekt chceme zmeniť. Napríklad, ak by sme chceli vymazať kruh:

kruh = canvas.create_oval(100-30, 100-30, 100+30, 100+30, fill="palegreen")
canvas.delete(kruh)

Posúvanie útvarov

# útvar s ID id sa posunie o 'dx' v osi X a o 'dy' v osi Y
canvas.move(id, dx, dy)

# napríklad:
kruh = canvas.create_oval(100-30, 100-30, 100+30, 100+30, fill="palegreen")
canvas.move(kruh, 30, -10)

Zmena vlastnosti nakresleného útvaru

Takto môžeme zmeniť ľubovoľné pomenované parametre ako fill, width, outline,...

canvas.itemconfig(id, parametre)

# napríklad zmeníme farbu existujúcemu kruhu
kruh = canvas.create_oval(100-30, 100-30, 100+30, 100+30, fill="palegreen")
canvas.itemconfig(kruh, fill='red')

Zmena súradníc útvaru

canvas.coords(id, súradnice)

# parameter súradnice musí obsahovať súradnice bodov, ktoré pre daný objekt
# dávajú zmysel, pre text sú to súradnice jedného bodu, pre obdĺžnik dvoch...

kruh = canvas.create_oval(100-30, 100-30, 100+30, 100+30, fill="palegreen")
canvas.coords(kruh, 200, 200, 300, 300)

ciara = canvas.create_line(10,10,10,20,20.20,30,10, fill="palegreen")
canvas.coords(ciara, 50,60,70,70,100,50)

Časovač

Zmeny útvarov v canvas sa dajú použiť na vytváranie animácií a pohybu, stačí naprogramovať opakujúcu sa malú zmenu pohybu a vyzerá to, že sa objekt pohybuje plynule... Zmeny ale nesmú nastať hneď po sebe, musíme zabezpečiť, aby medzi nimi uplynul nejaký čas. Na to sa hodí príkaz canvas.after(ms), ktorý pozastaví vykonávanie programu na daný počet milisekúnd. Potrebovať budeme aj príkaz canvas.update(), ktorý zabezpečí, ze sa všetky zmeny vykreslia.

kruh = canvas.create_oval(100-30, 100-30, 100+30, 100+30, fill="palegreen")
while True:
    canvas.move(kruh, 3, 0) # kruh sa posunie o 3 v osi X
    canvas.update()         # zmeny sa hneď aplikujú
    canvas.after(500)       # program počká pol sekundy