Vytvorme jednoduchý grafický editor, ktorý bude kresliť čiary a malé a veľké bodky, v ktorom bude možné nastaviť farbu pera, mazať nakreslený obrázok, ktorý bude alebo nebude mať pozadie a v ktorom bude používateľ môcť urobiť fotku a táto fotka sa stane pozadím. Naučíte sa pracovať s prvkami Canvas (plátno), Camera (fotoaparát, kamera), Variables (premenné) …
Kliknite na Start new projekt, zadajte meno Geditor. V Palette kliknite na Drawing and Animation (kreslenie a animácia), vyberte prvok Canvas (plátno) a presuňte ho na telefón. Canvas je prvok, na ktorý môžete kresliť. Vo vlastnostiach nastavte Width (šírku) na FillParent (šírka rodiča – rodičom je prvok Screen1), Height (výška) nastavte na 70%.
Prejdite na Blocks, kliknite na Canvas a vyberte blok when Canvas1.Touched (ak nastala udalosť kliknutie na plátno). Znova kliknite na Canvas a vyberte blok call Canvas1.DrawCircle (nakresli kružnicu) a presuňte ho do bloku Touched. Nastavenie parametrov centerX, centerY (súradnice stredu kružnice) a radius (polomer kružnice): Myšou sa postavte na x, zobrazia sa bloky get x a set x, vyberte blok get x a presuňte ho na centerX, to isté urobte s y a centerY. Polomer nastavte kliknutím na Math a presunutím prvého bloku do radius, číslo 0 zmeňte na 5. 
Ďalej chceme, aby pri ťahaní prsta po obrazovke sa kreslila čiara. Kliknite na Canvas1, presuňte blok when Canvas1.Dragged a umiestnite doň blok call Canvas1.DriveLine (kresliť čiaru). DriveLine má štyri parametre: x1, y1, x2, y2 – sú to súradnice koncových bodov úsečky. Blok Dragged má parametre: startX, startY (bod kde sme sa prvýkrát dotkli obrazovky), prevX, prevY (predchádzajúci bod ťahania prsta po obrazovke), currentX, currentY (súčasné miesto dotyku) a draggedAnySprite (nejaký ťahaný sprite – vysvetlím v ďalších kapitolách). Do x1, y1 umiestnite bloky get prevX, get prevY a do x2,y2 bloky get currentX, currentY. Mali by ste mať vo Viewer obrázky vpravo. Kliknite na Build, po skompilovaní aplikácie zosnímte čiarový kód a nainštalujte aplikáciu do mobilu. Aplikácia zatiaľ kreslí iba čierne bodky pri jednorazovom dotyku obrazovky a čiernu čiaru pri ťahaní prsta po obrazovke.
Nastavenie farby pera
Vráťte sa do Designer, kliknite na Button, presuňte ho na telefón, tlačítko premenujte na Cierne (kliknite na Rename), vlastnosť BackroundColor nastavte na Black, vo vlastnosti Text zmažte popis tlačítka. Podobne vytvorte tlačítka Modre, SvModre, Zelene, Fialove, Oraznove, Cervene, Ruzove a Biele. Prejdite do Blocks, kliknite na Cierne a vyberte blok when Cierne.Click, presuňte ho do Viewer, kliknite na Canvas1 a vyberte blok set Canvas1.PaintColor (nastaviť farbu kreslenia), presuňte ho do bloku when Cierne.Click, farbu vyberiete kliknutím na Colors, vyberte blok s čiernou farbou a presuňte ho do bloku set Canvas1.PaintColor. To isté by ste mohli urobiť aj ostatnými tlačítkami farieb, rýchlejšie bude kliknúť pravým tlačítkom na blok when Cierne.Click a vybrať prvú položku Duplicate (duplikát, kópia). Máte dva rovnaké bloky when Cierne.Click, v jednom zmeňte Cierne na Zelene (Modre, Cervene, …), kliknite tiež na farbu v bloku s farbou a vyberte farbu zodpovedajúcu farbe tlačítka. Aplikácia už umožňuje meniť farbu pera.
Nastavenie veľkosti bodiek
Vráťte sa do Designer, vytvorte nové tlačítko, premenujte ho na Bodka, vlastnosť Text nastavte na Bodka. Vytvorte ďalšie tlačítko, nazvite ho Bodisko a vlastnosť Text nastavte na Bodisko. Potrebujeme, aby si aplikácia pamätala veľkosť polomeru, ktorým má kresliť bodky. Prejdite do Blocks, kliknite na Variables (premenné), presuňte blok inicialize global name to (inicializácia globálnej premennej s názvom) do Viewer, name zmeňte na r, v Math vyberte číselný blok, umiestnite ho do bloku inicialize, číslo 0 zmeňte na 5. Kliknite na Bodka, presuňte blok when Bodka.click, kliknite na Variables, presuňte do predchádzajúceho bloku blok set global r to a vložte doň vložte číselný blok Math, nastavte hodnotu na 5. Zduplikujte when Bodka.click, zmeňte Bodka na Bodisko a zmeňte 5 na 15. Aplikáciu skompilujte a nainštalujte do mobilu. Vyskúšajte, že umožňuje meniť farby a veľkosť bodiek.
2. hodina
Nastavenie pozadia
V Designer kliknite na Canvas1, vo vlastnostiach kliknite na BackgroundImage (obrázok pozadia), kliknite na UploadFile a nahrajte nejaký obrázok do projektu (môže to byť napríklad kocúr z projektu Kocur). Celú plochu plátna zaplní nahraný obrázok.
Zmazanie nakresleného obrázku
Vytvorte nové tlačítko, umiestnite ho pod plátno, premenujte ho na Zmaz a vlastnosť Text nastavte na Zmaž. Prejdite do Blocks, kliknite na Zmaz, presuňte blok when Zmaz.click, kliknite na Canvas1 a blok call Canvas1.Clear vložte do bloku Zmaz.Click.
Nastavenie pozadia na fotografiu z fotoaparátu
Prejdite do Designer, vytvorte tlačítko Foto a nastavte vlastnosť Text na Foto. Aby ste aplikácii sprístupnili fotoaparát, kliknite na Media a presuňte Camera (fotoaparát) na telefón. Zobrazí sa medzi neviditeľnými prvkami. Prejdite do Blocks, kliknite na Foto, presuňte blok when Foto.Click, kliknite na Camera1, do bloku Foto.Click vložte blok call Camera1.TakePicture (spustiť fotoaparát a prevziať snímok). Znova kliknite na Camera1 a presuňte blok when Camera1.AfterPicture (udalosť bolo vykonané zosnímanie fotoaparátom). Kliknite na Canvas1, do bloku Camera1.AfterPicture vložte blok set Canvas1.BackgroundImage, presuňte myš na image a vložte blok get image do bloku set Canvas1.BackgroundImage. Projekt skompilujte a nainštalujte aplikáciu do mobilu, presvedčte sa, že po dotyku tlačítka Foto sa spustí obsluha fotoaparátu, odfoťte niečo, ak ste s obrázkom spokojní, stlačte OK a fotografia sa stane pozadím aplikácie.
Námety na zdokonalenie grafického editora
Aplikácia robí všetko, čo sme si dali za cieľ. Porozmýšľajte, ako by ste mohli aplikáciu ďalej zdokonaliť. Uvádzam niekoľko námetov. Určite vás napadnú aj iné vylepšenia
- uloženie obrázka do telefónu alebo na pamäťovú kartu
- načítanie v minulosti uloženého obrázka
- nastavenie hrúbky kreslenej čiary
- kreslenie geometrických útvarov: štvorec, trojuholník, hviezda, …
- odoslanie obrázka e-mailom
- výrez časti obrázka
Literatúra:
- Námetom pre článok bola 2. kapitola knihy App Inventor, Computer Press 2014