Folytatjuk az előző bejegyzésben elkezdett, közlekedési tiltó táblákat rajzoló program továbbfejlesztését azzal, hogy egér és billentyűzet eseményeket, és ezekhez rendelt eseménykezelőket határozunk meg, amelyek hatására a táblák méretét arányosan növelni vagy csökkenteni tudjuk.
Az eseménykezelő olyan egyparaméteres hívható objektum (pl. függvény vagy metódus), amely az esemény bekövetkeztekor lesz meghívva és argumentumként egy eseményobjektumot kap, amely az adott eseményről tartalmaz információkat, amit az eseménykezelő szükség esetén fel tud dolgozni.
A programunkban, a ProhibitorySign osztályban egy resizing_event_handler() nevű metódust definiálunk, amely első paramétere fogadja az eseményobjektumot. Ezen kívül van még két alapértelmezett értékkel rendelkező paramétere. Ebből az egyikkel egy esemény hatására történő méretváltozás arányát lehet beállítani. Más szóval ezzel azt határozhatjuk meg, hogy milyen finom léptékekben történjen a tiltó tábla méretváltozása. Az eseménykezelőnknek van még egy harmadik, True vagy False értéket fogadó paramétere is, amellyel azt határozhatjuk meg, hogy a méretváltozás növelést vagy csökkentést jelentsen. Az alapértelmezett True érték növelést jelent. Tehát ha True az érték, és az arány mértéke pl. 0.01, az azt fogja jelenti, hogy az eredeti mérethez képest 1.01-szeres lesz az új méret. Ha a méretváltozás irányát False értékre állítjuk, akkor – változatlan arány mérték mellett – az új méret az eredeti 0.99-szerese lesz.
Ezen felül definiálunk még egy eseménykezelőt speciálisan az egérgörgő forgatás eseményhez resizing_mousewheel_handler() néven, ami az eseményt fogadó paraméter mellett csak a méretváltozás arányát meghatározó paramétert tartalmazza. Erre azért célszerű külön metódust definiálni, mert az egérgörgetésnél a görgetés iránya fogja meghatározni, hogy méretnövelést vagy csökkentést, tehát nem a metódusfejben kell megadni híváskor.
Maga az átméretezés elvi szinten úgy valósul meg, hogy a külső kör sugarát fogjuk változtatni. Ehhez kell két újabb metódust definiálni: a get_radius() fogja kiadni a tábla (azaz a külső kör) aktuális sugarát, a set_radius() metódussal pedig meg tudjuk változtatni a tábla sugarát, aminek hatására a tábla az új mérettel kell, hogy megjelenjen a vásznon.
A konkrét feladattól és használati céltól függő tervezési kérdés, hogy a méretváltoztatás csak a körtáblára vonatkozzon, vagy a táblával együtt a vászon mérete is arányosan változzon, vagyis a tábla széle mindig érintse a vászon oldalát. Mi most ez utóbbi mellett döntünk.
A fentiek figyelembevételével az egyes metódusok megvalósítási elve a következő.
A get_radius() a legegyszerűbb, mert csupán a külső kör privát attribútumként eltárolt sugarát kell visszaadnia. Ezt felhasználjuk a két fent említett eseménykezelőben úgy, hogy a kikért aktuális sugárértéket megszorozzuk a méretváltozás megadott iránya és mértéke szerinti tényezővel, majd az így kapott értékkel meghívjuk a set_radius() metódust. Az resizing_mousewheel_handler() esetén a méretváltozás irányát (növelés vagy csökkentés) az eseményobjektum delta attribútuma határozza meg. /Itt nem kell ellenőrizni, hogy van-e az eseményobjektumnak delta attribútuma, mert ezt a metódust csak az egérgörgetés, azaz a MouseWheel eseményhez rendeljük majd, és ekkor biztosan lesz ilyen attribútum/.
Ha a delta negatív, akkor lefelé történt görgetés, amihez a méretcsökkentést rendeltük, és fordítva, ha a delta pozitív, akkor felfelé lett az egérgörgő tekerve, aminek hatására a sugár méretét növeljük. Ezen elvek alapján a get_radius() és a két eseménykezelő alább látható implementációinak megértése vélhetően nem okozhat gondot.
A tényleges méretváltoztatást a set_radius() metódus végzi. Ebben elsőként meg kell határozni a méretváltozás arányát, amely nem más, mint e metódus argumentumaként kapott sugár és a külső kör eddigi sugarának aránya. Ezt skálafaktornak fogjuk nevezni. Mivel úgy döntöttünk, hogy a vászon méretét is változtatjuk, ezért ennek szélességét és magasságát a skálafaktorral arányosan módosítjuk a vászonpéldányra meghívott config() metódussal. Ez azonban az eddigi közös középpontot is eltolja, ezért a vászon méretezése előtt az aktuális közös középpontot eltároljuk, majd a vászon méretváltozása után az új középpontot meghatározzuk és rögzítjük.
Az új középpont ismeretében első lépésben a köröket áthelyezzük úgy, hogy középpontjuk egybeessen az új középponttal. Második lépésben pedig a koncentrikus körök méretét a skálafaktor arányában módosítjuk. A körök áthelyezését a vászonpéldányra meghívott move() metódussal, a méretváltoztatásukat pedig a scale() metódussal végezzük. Ezek első argumentuma két dolog lehet. Vagy a változással érintett rajzobjektum azonosítója, vagy egy címke (tag). Ha ez utóbbit adjuk meg, akkor minden olyan rajzelemre, amelyhez e címke van rendelve, a változás érvényes lesz. Több rajzelem esetén ez a kényelmes, kevesebb kóddal járó megoldás. Esetünkben két rajzelem, a két kör érintett, ezért címkéket adunk meg a move() és scale() metódusokban.
Ahhoz, hogy ez így működjön, a két körhöz a címkéket hozzá is kell rendelni. Ezt az __init__ metódusban tesszük meg, és itt is sem egyenként, hanem a kényelmesebb utat választva, egyszerre mindkét körre, amit a vászonpéldányra meghívott addtag_all() metódusokkal tudunk megtenni. Ezt a lépést és a set_radius() teljes implementációját az alábbi kódban követhetjük.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
import tkinter as tk from collections import namedtuple # A koordinátákkal való munka megkönnyítésére egy Point típust hozunk létre. Point = namedtuple('Point', 'x y') class ProhibitorySign(tk.Canvas): def __init__(self, master, size: int = None): super().__init__(master, bg='gray90') self.name = 'Mindkét irányból behajtani tilos' self.addtag_all('átméretezhető') self.addtag_all('áthelyezhető') # Ha nem adjuk meg létrehozáskor a vászonpéldány oldalméretét, akkor a szülőelem méretéhez igazítjuk azt. if size is None: # A helyes méretek lekérdezéséhez előbb frissíteni kell az ablakot. master.update() m_w, m_h = master.winfo_width(), master.winfo_height() size = min(int(m_h), int(m_w)) self.config(height=size, width=size) # A körök közös középpontja, amelynek koordinátái a vászon aktuális oldalméretének felével egyezik meg. cc = Point(size / 2, size / 2) # Külső kör sugara, amely a vászon oldalméretének fele. r1 = size / 2 # A számítási pontosság korlátai miatt a kör széle nem mindig látszana, ezért egy egész kicsit csökkentjük a sugarat. r1 -= 2 # Beállítjuk a belső és a külső kör sugarának arányát, ami meghatározza, hogy milyen széles legyen a tiltó tábla piros szegélye. r2 = r1 * 0.8 # A későbbi használathoz a középpontot és sugarakat attribútumként tároljuk. self._ck, self._r1, self._r2 = cc, r1, r2 # A külső kör befoglaló négyzetének pontjai a középponttal és sugárral meghatározva. k1p1, k1p2 = Point(cc.x - r1, cc.y - r1), Point(cc.x + r1, cc.y + r1) # A külső kör létrehozása a befoglaló négyzet pontjait használva. # A külső kört piros színnel töltjük ki. A kisebb belső kör pedig fehér lesz. Így alakul ki majd a piros szegély. self._circle1 = self.create_oval(*k1p1, *k1p2, fill='red') # A belső kör befoglaló négyzetének pontjai a középponttal és sugárral meghatározva. k2p1, k2p2 = Point(cc.x - r2, cc.y - r2), Point(cc.x + r2, cc.y + r2) # A belső kör létrehozása a befoglaló négyzet pontjait használva. self._circle2 = self.create_oval(*k2p1, *k2p2, fill='white') self.bind_events_and_event_handlers() def bind_events_and_event_handlers(self): """Események és eseménykezelők összerendelése""" self.bind('<Control MouseWheel>', self.resizing_mousewheel_handler) self.bind('<Shift MouseWheel>', lambda e: self.resizing_mousewheel_handler(e, 0.1)) self.bind('<Button 1>', lambda e: self.focus_set()) self.bind('<Control plus>', lambda e: self.resizing_event_handler(e, 0.1)) self.bind('<Control minus>', lambda e: self.resizing_event_handler(e, 0.1, False)) def resizing_event_handler(self, e: tk.Event, g=0.01, increase=True): if increase: self.set_radius(self.get_radius() * (1 + g)) else: self.set_radius(self.get_radius() * (1 - g)) def resizing_mousewheel_handler(self, e: tk.Event, g=0.01): self.set_radius(self.get_radius() * (1 - g) if getattr(e, 'delta') < 0 else self.get_radius() * (1 + g)) def get_radius(self): return self._r1 def set_radius(self, r): scalefactor_x = scalefactor_y = r / self._r1 old_ck = self._ck self.config(width=int(self.cget('width')) * scalefactor_x, height=int(self.cget('height')) * scalefactor_y) self._ck = Point(int(self.cget('width')) / 2, int(self.cget('height')) / 2) new_ck = self._ck self.move(self._circle1, new_ck.x - old_ck.x, new_ck.y - old_ck.y) self.move(self._circle2, new_ck.x - old_ck.x, new_ck.y - old_ck.y) self.scale(self._circle1, *self._ck, scalefactor_x, scalefactor_y) self.scale(self._circle2, *self._ck, scalefactor_x, scalefactor_y) # TESZT root = tk.Tk() root.geometry('500x300') for prohibitory_sign in (ProhibitorySign(root, 158), ProhibitorySign(root, 158), ProhibitorySign(root, 150)): prohibitory_sign.pack(side=tk.LEFT) root.mainloop() |
Egyetlen dolog maradt, mégpedig az események és eseménykezelők összerendelése, amit az bind_events_and_event_handlers() metódusban teszünk meg. Az egérgörgetéshez két eseménykezelőt rendelünk. Az egyik az alapértelmezett, finomabb léptékű méretváltoztatást teszi lehetővé, míg a másik egy nagyobb arányú, így gyorsabb változtatást. A két esemény megkülönböztetéséhez az elsőnél a Ctrl gomb lenyomva tartása mellett kell a görgőt forgatni, a másik esetben pedig a Shift gombot kell lenyomva tartani.
A méretváltoztatást azonban nem csak egérrel, hanem billentyűkombinációval is el akarjuk érni. Ezért a Ctrl és a + billentyű együttes lenyomása mint eseményhez az resizing_event_handler() metódust rendeljük úgy, hogy a méret növekedjen. A Ctrl és a – billentyű együttes lenyomása mint eseményhez pedig az resizing_event_handler() metódusban a logikai értéket False-ra állítjuk, ami méretcsökkenést vált ki. Ahhoz, hogy a billentyűzettel kiváltott események érvényesüljenek, a táblának fókuszba kell kerülni. Ezt vagy a Tab billenytűvel tudjuk elérni, vagy ha egéreseménnyel akarjuk, akkor ezt is definiálni kell. Mi most a bal egérgomb lenyomásához kötjük a fókuszbakerülést, amelyet a focus_set() meghívásával érünk el.
Az események és eseménykezelők egymáshoz rendelését a vászonpéldányra meghívott bind() metódussal tudjuk megtenni, amelynek első argumentuma az eseményt definiáló karakterlánc, a második pedig az eseménykezelő. Az bind_events_and_event_handlers() elmondottaknak megfelelő implementációját szintén láthatjuk a fenti kódban.
A tesztnél három egyforma méretű táblát hoztunk létre, és jelenítettünk meg a pack() metódussal balról jobbra történő lehelyezéssel. Utána a bal oldali méretét egérgörgetéssel növeltük, a jobb oldalit – a fókuszba hozás után, amelyet a keret jelez – billentyűkombinációval csökkentettük. A középső tábla a létrejöttekor kapott eredeti méreten maradt.
A következő bejegyzésben az eddigi munkánkra alapozva olyan tiltó táblákat fogunk készíteni, amelyek közepén valamilyen szövegesen megjeleníthető információ van (pl. sebességkorlátozó táblák).
Az események grafikus elemekhez történő rendelésének elvét, részleteit, szintaktikai előírásait és az implementálás bizonyos kérdéseivel kapcsolatos javaslatokat a Python tudásépítés lépésről lépésre című e-könyv „Grafikus felhasználói felület készítése” fejezetének „Események és programkód összerendelése” alfejezete tartalmazza.