Grafikus utasítások

Grafikus felület létrehozása

Elindítottuk az IDLE környezetet és létrehoztunk egy új fájlt - programozói módban vagyunk.
Ha a grafikus felülettel akarunk dolgozni, akkor előbb importálnunk kell azt a modult, ami a grafikus felületet kezeli. (Ez egy program, amit valaki már előttünk megírt, beprogramozta azokat az utasításokat, amiket mi használni fogunk.) Mi a tkinter nevű modult fogjuk használni, amit a következő utasítással beimportálunk:

Pontok koordinátái és vonalak rajzolása

A grafikus felületre rajzolhatunk vonalakat, téglalapokat, ellipsziseket stb. Rajzolásnál az utasításhoz meg kell adni pontok koordinátáit.
Minden pontnak két koordinátája van: egy x és egy y. Az x koordináta a pont vízszintes helyét határozza meg, az y pedig a függőlegeset. De vigyázat! Az y koordináták  lefelé növekszenek (nem úgy, ahogy a matematikában megszokhattuk). A koordinátákat mindig számpárokként adjuk meg, ahol az x az első szám, y pedig a második.

Kérdések

1. Milyen koordinátái lesznek annak a pontnak, amely 20 pontra balra van a [100, 50] ponttól?
2. Milyen koordinátái lesznek annak a pontnak, amely 20 pontra jobbra van a [100, 50] ponttól?
3. Milyen koordinátái lesznek annak a pontnak, amely 20 ponttal feljebb van a [100, 50] ponttól? 
4. Milyen koordinátái lesznek annak a pontnak, amely 20 ponttal lejjebb van a [100, 50] ponttól?
5. Mi a közös azokban a pontokban, amelyek jobbra ill. balra vannak a [100, 50] ponttól?

A canvas.create_line(10, 100, 200, 100) utasítással vonalat tudunk rajzolni, amely a [10, 100] koordinátájú pontban kezdődik, és a [200, 100]-ban ér véget. Ezzel az utasítással olyan vonalat is rajzolhatunk, amely több ponton halad keresztül. Pl. canvas.create_line(10, 100, 200, 100, 10, 200).

Rajzolásnál beállíthatjuk a vonal vastagságát és színét is.
canvas.create_line(10, 100, 200, 100, 10, 200, fill='red', width=5)

A színt a fill paraméterben adjuk meg aposztrófok között (AltGr + P), pl 'red', 'white', 'black', 'blue', 'yellow', 'green', ...

Téglalapok rajzolása

A canvas.create_rectangle(10, 50, 110, 100) utasítással egy téglalapot rajzolunk, amely a [10, 50] és [110, 100] pontok által van meghatározva.

Kérdések

1. Milyen széles ez a téglalap?
2. Milyen magas ez a téglalap?
3. Ezt a négyzetet a canvas.create_rectangle(110, 100, 10, 50) utasítással is meg tudnánk rajzolni?
4. Ugyanezt a téglalapot, ugyanerre a helyre más módon is megadhatjuk?
5. Mi rajzolódik ki a canvas.create_rectangle(10, 50, 110, 50) utasítással?
6. Mi rajzolódik ki a canvas.create_rectangle(10, 50, 10, 50) utasítással?

Téglalapok rajzolásánál is beállíthatjuk a színezést - ugyanúgy mint a vonalaknál. A fill paraméter a kitöltőszín, tehát a téglalap belsejét festi ki. A körvonal színét az outline paraméterben állíthatjuk be.

Pl. canvas.create_rectangle(50, 50, 150, 100, fill='blue', outline='yellow', width=5)

Egy programba több ábrát is rajzolhatunk egymás mellé. Ha nem elég a vászon mérete, vagy meg akarjuk változtatni a háttér színét, akkor ezt megtehetjük a programunk elején, amikor létrehozzuk a vásznat. A height paraméterrel a vászon magasságát, a width-vel a szélességét, a bg-vel pedig a háttér színét állíthatjuk be.

import tkinter

canvas = tkinter.Canvas(height=500, width=700, bg='white')
canvas.pack()

Ellipszisek rajzolása

Ellipszist a canvas.create_oval(50, 50, 150, 100) utasítással rajzolhatunk. A két megadott pont az ellipszis köré írt téglalapot határozza meg.

Kérdések

1. Téglalapot egyetlen utasítással tudunk rajzolni. Négyzet rajzolásához szükségünk van speciális utasításra? Mi alapján tudjuk, hogy a téglalap utasításban megadott koordináták egy négyzet koordinátái lesznek?
2. A canvas.create_oval utasítással tudunk kört is rajzolni? Milyen koordinátákat kell megadnunk, hogy kört kapjunk?

Sokszögek rajzolása

A sokszögnek akkor van értelme, ha legalább 3 pontot (azaz 6 számot) adunk meg. 

Szöveg kiírása a vászonra

A canvas.create_text(100, 70, text='Hello') utasítás kiírja a Hello szöveget a [100, 70]-es koordinátákra. Az első két paraméter a kiírt szöveg közepét határozza meg.
Az utasításban használhatjuk a font paramétert is, amivel megadhatjuk, milyen betűtípust (egyelőre maradjunk az egyszavas neveknél), mekkora méretet és milyen stílust használjon az utasítás. 

A kiírás színét a fill paraméterrel adhatjuk meg. Az angle paraméter segítségével el tudjuk forgatni a szöveget a megadott koordináták körül. A forgatás az óramutató járásával ellentétes irányba történik.

További tippek

Ha az alakzatunknak nem szeretnénk kitöltést vagy körvonalat rajzolni, akkor a fill és outline tulajdonságokat hagyjuk üresen a következő módon:

canvas.create_rectangle(50, 50, 100, 150, fill='', outline='red')  - ennek a téglalapnak nincs kitöltése
canvas.create_rectangle(150, 150, 250, 200, fill='blue', outline='')  - ennek a téglalapnak nincs körvonala