Vyfarbi si sám

Našou ďalšou úlohou bude vytvorenie jednoduchých maľovaniek umožňujúcich vyfarbovanie pripravených kreslených obrázkov. Užívateľ môže medzi obrázkami listovať a vylievaním plôch je vyfarbovať. Čierna farba je pritom rezervovaná pre obrysy obrázkov.

Najskôr založte nový program s názvom Vyfarbi.

Upravíme veľkosť plochy. Máme predstavu, že budeme editovať obrázky so štandardnou veľkosťou 20 x 15 políčok (640 x 480 grafických bodov). Na voľbu farby a obrázka potrebujeme dole v okne pás s výškou 1 políčka. Nastavte preto veľkosť hlavnej plochy programu na 20 x 16 políčok. Vymažte prázdne políčko priehľadnou farbou, tým zaistíte zviditeľnenie grafické plochy.

Vytvorte dva nové predmety - šípka vľavo a šípka vpravo. Nakreslite do nich obrázky ovládacích tlačidiel pre listovanie vľavo a vpravo, podklad bude šedý. Položte predmety vedľa seba do pravého dolného rohu plochy.

Vytvorte hlavný slučku programu - nekonečný podmienený cyklus (v podmienke cykle bude prvok áno). V tele cykle bude jeden príkaz čakania.

Pred hlavnou slučku pripravte skupinu s názvom inicializácia programu. Skupina bude obsahovať prípravné operácie vyžadované na beh programu.

Prvým príkazom bude nastavenie textu pomoci do stavovej lišty na spodnom okraji okna. Neobsahuje Ak stavová lišta žiadny text, je vypnutá. Ak chceme používať v programe stavový riadok, je dobré ju zapnúť ihneď na začiatku programu. Prázdnu stavový riadok by sme zaistili zobrazením znaku medzera.

Druhým príkazom je funkcia príprava obsluhy voľby farby. Nadefinuje použité farby pre kreslenie a zobrazí políčka s farbami. Funkcia naplnenie zoznamu obrázkov pripraví zoznam obrázkov. Funkcia zobrazenia vybraného obrázku obrázok zobrazí. Zatiaľ pripravte len prázdne funkcie. Posledné štyri príkazy slúži k predefinovanie vzhľadu kurzora myši, o nich tiež až neskôr.

Ak spustíte teraz program, uvidíte čiernu plochu, vpravo dole dve tlačidlá a nápisy v nadpise okna a v stavovej lište. A Petríka koukajícího vľavo dole. Zatiaľ nič moc, ale sme ešte len na začiatku.

V okne Spoločných premenných a funkcií vytvorte nový zoznam s názvom zoznam farieb. Veľkosť zoznamu nastavte na 36, to bude počet farieb použitých v editore. Ukazovateľ v zozname premenujte na index farby a automatický prírastok na inkrementácia indexu farby. Do zoznamu pridajte jeden číselný dátový prvok farba.

Vytvoríme obsah funkcie príprava obsluhy voľby farby. Prepnite sa do nej dvojklikom myšou na ikonu funkcie. Úplný obsah funkcie vidíte na nasledujúcom obrázku. Po pravej strane je rozvinutý cyklus pre vytvorenie políčok farieb. Funkciu si postupne podrobne popíšeme.

Najskôr naplníme zoznam farieb. Nastavte index farby na 0 a inkrementácia indexu farby na 1. Tým zabezpečíme, že sa farby budú do zoznamu ukladať od začiatku a po každom nastavení farby sa ukazovateľ zoznamu automaticky zvýši o 1. Nasledujú príkazy nastavenie farieb. Zvoľte 36 farieb podľa vlastného výberu (nie čiernu, tú používame pre obrysy). Prečo zrovna 36? Pre voľbu farby budeme mať k dispozícii 18 políčok a na každom políčku budú 2 farby.

Políčka voľby farieb budeme realizovať pomocou predmetov. Predmety sú v tejto chvíli vhodnejšie ako grafické vykreslenie, pretože pri vylievaní plôch by nám zrejme mohlo natiecť aj do okienok s farbami. Namiesto ručného kreslenia predmetov použijeme vytvorenie programovej. Je to jednoduchšie ako upravovať 36 okienok a predovšetkým možno ľahšie udržať súlad medzi okienkami a skutočnými farbami, ak farby v programe niekedy zmeníme.

Vytvorte si vo Spoločných premenných a funkciách obrázok (nie predmet) okienko voľby farieb o veľkosti 1x1 políčko. Nakreslite do neho okienka pre voľbu 2 farieb, asi takto:

Predmety budeme vytvárať tak, že obrázok okienka voľby farieb vykreslíme do okna programu, vyplníme farbami, zložíme z okna ako predmet a uložíme do plochy. Na ukladanie do plochy použijeme Lucku. Preto ju nastavíme na prvé políčko (horizontálne na 0) a otočíme doprava. Nasleduje cyklus pre všetky predmety farieb (polovica počtu farieb).

Prvým príkazom v cykle je vykreslenie obrázku okienka voľby farieb. V príkaze uvedieme iba jediný parameter - obrázok k vykreslenie. Ak nie sú ostatné parametre uvedené, vykreslí sa obrázok v ľavom dolnom rohu okna.

Druhým príkazom je vyliatie ľavého okienka farbou zo zoznamu farieb. Súradnice miesta volíme v strede okienka (tj. X = 0.25). Rovnako tak vylejeme pravej okienko druhou farbou, opäť do stredu druhého okienka (X = 0.75). Ukazovateľ farieb sa posúva automaticky.

Vytvorený obrázok predmetu zložíme z okna funkcií úschova výrezu z plochy ako predmet a uložíme ho ihneď na pozíciu s Luckou. Potom Lucka podíde na ďalšie políčko.

Po vytvorení všetkých políčok farieb zmeňte inkrementácia indexu farby na 0, od tejto chvíle už automatickú inkrementácia nebudeme v programe používať.

Pripadá vám, že robíme v okne príliš veľa operácií a že snáď takéto operácie musia byť viditeľné? V skutočnosti sú tieto prípravné vykresľovací operácie veľmi rýchle a my máme dosť času, než sa obsah okna vykreslí na displeji prvom príkazom čakania. Vykreslený obrázok zostane skrytý pod prvým predmetom voľby farieb, takže sa dokonca ani nemusíme starať o záverečnej vymazanie obrázku.

Teraz môžete program spustiť. Ak je všetko v poriadku, objaví sa na spodnej strane okna pás s farebnými okienkami voľby farieb. Zatiaľ stále ešte s Petrik.

Teraz pripravíme obrázky. Na konci lekcie si stiahnite vzorové obrázky a rozbaľte ich do knižnice Picture. Obrázky pretiahnite z knižnice do programu vrátane zložky vo ktoré sú umiestnené. V okne Spoločných premenných a funkcií pripravte zoznam obrázkov. Obrázkov je 25. Zoznam bude mať textovú položku meno obrázku a obrázkové položky obrázok a pôvodný obrázok.

Naplňte zoznam obrázkov vo funkcii naplnenie zoznamu obrázkov. Klasickým spôsobom - nastavením inkrementácia indexu obrázku na 1, naplnením zoznamu mien obrázkov (podľa mien súborov) a naplnením obrázkov v zozname vzory obrázkov načítanými z knižnice. Medzi plnením mien obrázkov a obrázkov netreba nulovať index obrázku, nuluje sa automaticky pretečením cez koniec. Potom ešte pomocou cyklu uchovajte obrázky do premennej pôvodný obrázok. Pretože pristupujeme ku 2 položkám zoznamu, nemôžeme použiť automatickú inkrementácia a musíme používať programové zvyšovanie indexu.

Pristúpime k funkcii zobrazenie vybraného obrázku. Ako vidíte na obrázku nižšie, najskôr sa zobrazí vybraný obrázok v zozname na súradnicu Y = 1 (pretože dole je pás voľby farby). Potom sa zobrazia informácie v titulku okna - meno obrázka, číslo obrázka a celkový počet obrázkov. Výsledkom bude text ako napríklad "Vyfarbi - Domček (obrázok 4 z 25)". Na obrázku to nie je viditeľné, ale nezabudnite na patričných miestach v textoch oddeľovací medzery.

Opäť môžete program spustiť - mali by ste vidieť zobrazený prvý obrázok zoznamu.

V programe budeme používať Petríka ako indikátor, ktorá farba je práve zvolená. Vyvolajte editáciu sprajt Petríka. Zmeňte parametre sprajt na nasledujúce hodnoty: oneskorenie medzi fázami = 110, fáz na krok = 0, fázou pre pokoj = 4, fáz pre pohyb = 0, smerov = 1, šírka obrázku = 0.5. Vyhoďte obrázky Petríka zo sprajt a dvojklikom do prvého obrázka vyvolajte editáciu obrázka. Do obrázku nakreslite rámček indikátora, využite striedajúce sa farby biela-šedá-čierna-šedá. Skopírujte obrázok do ďalších políčok sprajt a posuňte body vždy o 1 bod v smere hodinových ručičiek. Pri skúške sprajt uvidíte, ako rámček "tečie" po obvode.

Lucku použijeme ako indikátor farby pod kurzorom myši. Vyvolajte editáciu sprajt Lucky a zmeňte parametre sprajt: fáz na krok = 0, fázou pre pohyb = 0, smerov = 1, šírka obrázku = 0.5. Prekreslite obrázok vo sprajt tak, aby vytvoril dojem vyvýšeného okienka voľby farby. Stred pritom ponechajte priehľadný.

V hlavnej slučke programu (pred príkazom čakania) pripravte skupinu s názvom zistení a test platnosti farby pod kurzorom. Tu budeme priebežne testovať farbu pod kurzorom myši, aby sme mohli pre príslušnú farbu zapnúť indikáciu. Zistenú farbu budeme používať v programe aj u ďalších obslúh.

Vo Spoločných premenných pripravte dve číselné premenné: farba pod kurzorom myši a index farby pod kurzorom. Na začiatku skupiny tieto dve premenné nastavte na hodnotu -1 na indikáciu, že pod kurzorom myši nie je platná farba. Nasleduje podmienený príkaz testujúci, či sa nachádza kurzor myši nad plochou obrázku. Test zaistíme prvkom test myši v oblasti s nastavenými parametrami podľa obrázku v okne. Ak je kurzor myši nad obrázkom, načítame farbu pod kurzorom funkcií načítanie farby bodu. Farbu uchováme v premennej farba pod kurzorom myši. Súradnice bodu na načítanie farby prevezmeme zo súradníc myši pozície myši v horizontálnom smere a pozície myši vo vertikálnom smere. V programoch systéme Peter je zabezpečené, že informácie o myši sa až do ďalšej obsluhy čakania nezmení.

Po načítaní bodu sa pokúsime farbu vyhľadať v tabuľke farieb. Cyklus vyhľadanie farby vidíte na obrázku vpravo. Cyklus prechádza celú tabuľku farieb, každú farbu porovnáva so zistenou farbou pod kurzorom. Ak nájde zodpovedajúce farbu, uschová jej index do premennej index farby pod kurzorom, nastaví Lucku (ako indikátor farby pod kurzorom) nad okienko s farbou a zapne viditeľnosť Lucky.

Všimnite si bližšie, ako sme cyklus použili. Index farby v zozname farieb určuje súčasne farbu aktuálne vybratú užívateľom. Cyklus prejde celý zoznam farieb raz dookola, po ukončení cyklu bude mať index farby presne rovnakú hodnotu, akú mal pred začatím cyklu. Preto cyklus nesmieme ukončiť po nájdení farby. Využili sme pritom automatického návrate ukazovatele zoznamu na začiatok po prekročení konca zoznamu.

Pozastavme sa u Lucky. V celom programe ponechávame vertikálne súradnicu Lucky trvalo na východiskovej hodnote 0. Horizontálny súradnicu nastavujeme na polovičnú hodnotu indexu farby pod kurzorom, pretože okienka farieb sú široké polovicu políčka. Ak vás zaráža, že Lucka môže stať aj medzi políčkami, tak je tomu skutočne tak. Pri nastavovaní pozície Lucky zadaním súradníc môžeme používať ľubovoľné hodnoty, vrátane hodnôt mimo plochu okna, pretože Lucka je bežným sprajt. Iba pri pohybovaní Lucky pomocou príkazu krok sa Lucka (rovnako i Petřík) obmedzuje na plochu okna a cieľová súradnice je zarovnaná na najbližší políčko.

Za podmieneným príkazom pre načítanie farby nasleduje podmienený príkaz zaisťujúci vypnutie indikátora farby, ak nie je pod kurzorom myši platná farba. To môže nastať nielen v prípadoch, keď sa kurzor myši mimo plochu obrázka, ale aj keď je pod kurzorom myši čierna (alebo nejaká neznáma) farba.

Program spustite a vyskúšajte. Mala by už byť funkčné indikácia farby pod kurzorom myši. Nabehnete Ak myšou v obrázku nad nejakou farbu, okienko s príslušnou farbou vystúpi nad povrch okna.

Začneme s ovládaním, a to najskôr s ovládaním pomocou klávesnice. Doplňte za skupinu pre zistenie farby prvok viacstupňové vetvenia príkazov s menom obsluha klávesov. V testovanej hodnote použijeme funkciu vstup klávesy (nečaká na stlačenie).

Najskôr si ešte pripravíme pomocnú funkciu úschova obrázku. Jej obsah je jednoduchý - sníme obsah okna do aktuálne vybraného obrázku. Túto funkciu budeme volať vždy pred zmenou na nový obrázok.

Prvá vetva vetviaci konštrukcie vytvoríme pre kláves Esc. Ako obsluhu vetvy použijeme príkaz preruš opakovania, ktorý preruší hlavné slučku programu a tým ukončí celý program.

V druhej vetve obslúžime kláves vľavo. V obsluhu vetvy uveďte funkciu predošlý obrázok, predtým funkciu vytvorte (zatiaľ prázdnu). Podobne obslúžime kláves vpravo, len použijeme funkciu ďalší obrázok. Za funkcie uveďte príkaz vyprázdnenia zásobníka klávesov. Klávesy môžu byť generované rýchlejšie ako je rýchlosť priechodu hlavný slučkou, program by mal pri listovaní zotrvačnosť, čo nie je príjemné.

Môžete ešte obslúžiť ďalšie listovací klávesy, ako napríklad Home pre skok na prvý obrázok, End pre skok na posledný obrázok. Posledné klávesom bude backspace. S jej pomocou môže užívateľ obnoviť obrázok do pôvodnej podoby ako pred editáciou. Tieto ďalšie klávesy už nepoužívajú funkcie, pretože iba operácie vľavo / vpravo sa vykonávajú tak z klávesnice, tak v obsluhe myši.

Obsah funkcií vľavo / vpravo je veľmi jednoduchý, vidíte ich na nasledujúcich obrázkoch. Iba sa uschová obsah obrázku, posunie sa index obrázku a zaistí vykreslenie nového vybraného obrázku. Nie je potrebné obsluhovať pretečeniu indexu cez začiatok či koniec zoznamu, pretože to rieši systém Petr automaticky.

Program vyskúšajte. Pomocou šípok vľavo a vpravo na klávesnici by ste mali byť schopní listovať obrázky. Klávesa Esc program ukončí.

Teraz vytvoríme obsluhu ovládanie myšou. Do hlavnej slučky za obsluhu klávesov pridajte podmienený príkaz s názvom kliknutie ľavým tlačidlom myši. Do testu podmienky vložte prvok klik ľavým tlačidlom myši. Je to logický príznak a je nastavený vždy, keď používateľ klikne ľavým tlačidlom myši do okna programu. Vypnutie príznaku sa vykoná jeho čítaním, napríklad použitím v podmienke. Preto ak budete niekedy chcieť príznak testovať viackrát, musíte si ho uschovať v logickej premennej.

Ak v teste podmienky zistíme, že používateľ klikol myšou, rozlíšime v ďalšom podmienečnom príkaze podľa vertikálnej súradnice myši, či išlo o kliknutie do obrázka alebo do pásu s farbami a tlačidlami. Hranicou rozlíšenie je 1, pretože pás je vysoký 1 políčko.

Pre obsluhu voľby farby pripravíme novú funkciu s názvom voľba farby. Do vstupných premenných funkcie dáme číselnú premennú polohy kurzora myši X. S jej pomocou budeme funkciu odovzdávať horizontálne súradnicu myši v poli voľby farieb.

Vo funkcii prevezmeme hodnotu vstupnej premennej, vynásobením číslom 2 súradnicu prevedieme na číslo farby, funkciou celočíselná časť odstránime nepotrebnú desatinnú časť a výsledok použijeme na nastavenie nového indexu farby. Nastavíme horizontálne súradnicu Petríka na polovičnú hodnotu indexu farby, čo zodpovedá súradnici okienka s farbou. Petríka v programe používame ako indikátor vybranej farby. Jeho vertikálne súradnice zostáva trvalo nastavená na 0, preto si ju nemusíme všímať.

Ak zistíme z vertikálnej súradnice myši, že používateľ klikol do pásu tlačidiel a voľby farieb, rozlíšime ďalej podľa horizontálne súradnice myši, či klikol do voľby farieb alebo na tlačidlá. Pre horizontálne súradnicu menšie ako 18 je obslúžený voľba farby. Zavoláme funkciu voľba farby s horizontálnou súradnicou myši ako parameter. Inak sa jedná o tlačidla prepínania obrázkov. Pre horizontálne súradnicu menšie ako 19 je to tlačidlo vľavo, voláme funkciu predošlý obrázok, inak voláme funkciu ďalší obrázok. Celú obsluhu voľby farby alebo tlačidiel vidíte tu na obrázku:

Opäť program vyskúšajte. Ľavým tlačidlom myši je možné prepínať obrázky a v páse voľby farieb meniť vybranú farbu.

Teraz obslúžime prípad, kedy užívateľ klikol ľavým tlačidlom myši do oblasti obrázka. Základom obsluhy bude podmienený príkaz vyliatiu obrázka farbou (na ďalšom obrázku). V teste podmienky overíme, či pod kurzorom myši nie je čierna farba. Čiernu farbu používame pre obrysy obrázkov a nesmieme ju vyliať. Farbu pod kurzorom myši sme si uschovali do pomocnej premennej na začiatku hlavnej slučky programu.

V obsluhu vyliatie obrázku farbou použijeme príkaz Výplň. Farbu určí premenná farba zo zoznamu farieb. Súradnice výplne prevezmeme zo súradníc myši.

Program spustite. Vyskúšajte vylievanie obrázku vybranou farbou a overte, že nemožno vyliať čierny obrys obrázku.

Pravé tlačidlo myšou bude slúžiť na nabratie farby pod kurzorom myši z obrázku. Obsluhu vidíte na ďalšom obrázku. Ak je stlačené pravé tlačidlo myši a ak je kurzor myši nad obrázkom a ak je farba pod kurzorom myši platná, nastaví sa farba ako vybraná farba. Opäť vyskúšajte.

Poslednou úpravou programu bude predefinovanie kurzora myši podľa toho, v ktorom mieste plochy sa nachádza. V okne Spoločné premenné a funkcie si pripravte 4 predmety s obrázkami kurzorov - šípky, kvapkadlo a výplň.

Obrázky majú čierny obrys, okolie je priehľadné a vnútro vyplnený bielou farbou. Na vrcholy kurzorov kvapkadla a výplne doplníme žltú bodku čoby polohovacie miesto kurzora (s inverziou farieb). Pri ostatných kurzorov zostane polohovacie miesto implicitne uprostred obrázka.

V skupine inicializácia programu určíme pomocou príkazov nadefinovanie vzhľadu kurzora myši, aký vzhľad v ktorej časti okna bude kurzor myši mať. Pre pole výberu farby nadefinujeme kvapkadlo, pre ovládacie tlačidlá šípky vľavo a vpravo, pre plochu obrázku kurzor výplne.

Aby sme si ujasnili funkciu príkazu pre definovanie vzhľadu kurzora myši, môžeme si predstaviť oblasti definície vzhľadu myši ako obdĺžniky, ktoré postupným pridávaním prekrývajú starej definície. Platí vždy definícia najviac na vrchole. Ak nezadáte žiaden obrázok myši, použije sa štandardná vzhľad myši v okne, určený systémom. Ak nezadáte rozmery oblasti, predefinuje sa kurzor myši pre celé okno. Všetky definície môžeme zrušiť uvedením príkazu bez akýchkoľvek parametrov.