1. Prednáška 1
Image
grafický editor
shape
toolbar

2. Kreslenie v Delphi
vykresľovať možno na komponenty, ktoré dávajú k dispozícii Canvas – plátno, s bodom 0,0 vľavo hore
kreslenie vyzerá tak, že použijeme metódy plátna, ktorých určíme parametre:
čiara:
začiatok čiary – nastavenie kresliaceho kurzora na pozíciu: MoveTo(10,10)
koniec čiary – ťahanie z aktuálnej pozície do zadaného bodu LineTo(100,100)
v prípade použitia ďalšieho LineTo sa ťahá od bodu, kde sa skončilo
pre nasledovné útvary sa zadáva ľavý horný a pravý dolný roh
obdĺžnik: Rectangle(10,10,50,100)
elipsa: Ellipse(10,10,50,100)

3. Canvas základný Canvas poskytuje formulár
prístup k nemu je cez Form1.Canvas.Rectangle(10,10,200,200)
vykresľovanie na väčšinu Canvasov má však nepríjemnú vlastnosť:
prekrytím napr. formulára sa prekrytá časť zmaže,
minimalizáciou okna sa celý obsah stratí do nenávratna
riešením je používanie komponentu Image, ktorý si vykreslený obsah „pamätá“

4. Domček
Nakreslite modrý domček so zeleným plotom a zafarbite mu strechu na červeno.
vložím na formulár Image zo záložky Additional a nastavím mu vhodnú veľkosť
pridám tlačidlo, ktoré po stlačení nakreslí domček
ten pozostáva z obdĺžnika a dvojice čiar tvoriacich strechu
plot bude realizovaný dvoma rovnobežkami a kolmicami vykreslenými v cykle

5. Kód // dom image1.Canvas.Pen.Color:=clBlack; // čierna farba pera
image1.Canvas.Brush.Color:=clBlue; // modrá farba výplne
image1.Canvas.Rectangle(50,50,100,150);
// strecha
image1.Canvas.Pen.Color:=clRed; // cervena farba pera
image1.Canvas.MoveTo(50,50);
image1.Canvas.LineTo(75,20);
image1.Canvas.LineTo(100,50);
// na vyfarbenie sa pouzije "plechovka",
// ktora zaleje uzavrety priestor po hranicu
// zada sa bod, od ktoreho sa ma zacat
image1.Canvas.Brush.Color:=clRed; // cervena farba výplne
// bude nahradena cela plocha bielej farby
// biela je clwhite, ze cela plocha hovori fsSurface
Image1.Canvas.FloodFill(75,30,clwhite,fsSurface);
// mozno nastavit aj hranicnu farbu, strechu vsak
// nemame kompletne ohranicenu, keby sme mali tak
// rovnaky efekt by vykonalo:
// Image1.Canvas.FloodFill(75,30,clRed,fsBorder);
// po cervenu hranicu (fsBorder) nahrad vsetko

6. Kód pre plot procedure TForm1.Button2Click(Sender: TObject);
var i:integer;
begin
// rovnako ako pri recordoch mozno pouzit with
with Image1.Canvas do begin
Pen.Color:=clGreen; // zelena farba ciar
// rovne ciary
MoveTo(100,110); LineTo(250,110);
MoveTo(100,140); LineTo(250,140);
for i:=1 to 15 do begin // kazdych 10 bodov zvisla ciara
MoveTo(100+i*10,100);
LineTo(100+i*10,150);
end; // cyklu
end; // with
end;

7. Vloženie textu do obrázku
TextOut
podpíšeme sa:
procedure TForm1.Button3Click(Sender: TObject);
begin
// aby podmaz pre text bol biely
Image1.Canvas.Brush.Color:=clWhite;
// vypis textu na poziciu
Image1.Canvas.TextOut(200,200,'autor: Jozko Mrkvicka');
end;

8. Grafický editor na Form vložíme Image
nastavíme jeho Allign na celé okno
kreslenie sa realizuje stlačením tlačidla myši a ťahaním po pracovnej ploche, čiže:
pri zatlačení tlačidla kreslenie začne
počas ťahania myši prebieha
a napokon po pustení sa skončí

9. Implementácia
Obrázok (a vlastne takmer každý komponent) má okrem svojich vlastností (properties) uvedené v okne Object inspectora aj udalosti (events), na ktoré je schopný reagovať
je dôležité obslúžiť udalosti:
MouseDown (moment, keď stlačím tlačidlo myši),
MouseMove (ťahanie myšou, pričom je jedno, či je tlačidlo stlačené alebo nie, k tejto udalosti dochádza pri každej zmene pozície kurzora)
MouseUp (moment, keď pustím tlačidlo myši)

10. Implementácia II. kľúčová je udalosť MouseMove:
prebieha tu samotné vykresľovanie
môže však prebehnúť len pri stlačenom tlačidle
o ošetrenie stlačenia sa postaráme v udalostiach MouseDown a MouseUp.

11. Kód
procedure TForm1.Image1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X,Y: Integer);
begin
// ak stlacim tlacidlo, znamena to, ze idem kreslit
kreslenie:=true;
end;
//***************************************************************
procedure TForm1.Image1MouseMove(Sender: TObject; Shift: TShiftState; X,Y: Integer);
if kreslenie then // v pripade ak je stlacene tlacidlo
Image1.Canvas.Pixels[x,y]:=clBlack; // vykreslim na pozicii [x,y] čierny bod
procedure TForm1.Image1MouseUp(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X,Y: Integer);
// ked pustim tlacidlo, postaram sa, aby pri pohybe mysou uz
// kreslenie neprebiehalo
kreslenie:=false;

12. Globálna premenná
premenné, ktoré sme používali doposiaľ boli deklarované v rámci podprogramu (udalosti), v rámci ktorej sme ich použil (označujeme ich ako lokálne)
v pamäti sa vytvorili pri jej spustení (napr. pri stlačení tlačidla) a po ukončení zmizli
ak by sme premennú kreslenie deklarovali v každej udalosti samostatne, nedokázali by sme ju v jednej nastaviť a v ďalšej otestovať jej hodnotu
aby bolo možné preniesť premennú medzi udalosťami (podprogramami), treba ju deklarovať ako globálnu

13. Deklarácia globálnej premennej

14. Súradnice pre kreslenie
proces je relatívne jednoduchý, treba si len uvedomiť, že každá z popísaných udalostí posiela do programu ako jeden z parametrov aj pozíciu, na ktorej k udalosti došlo – v našom prípade sú to súradnice x a y
procedure TForm1.Image1MouseMove(Sender: TObject; Shift: TShiftState; X,Y: Integer);
hodnoty využijeme v procedúre MouseMove,
prikážeme obrázku s názvom Image1,
aby na svojom kresliacom plátne - Canvas
vyfarbil bod (Pixels) so zadanými súradnicami
na čierno (clBlack)
premennú kreslenie potrebujeme definovať ako globálnu

15. Problém
pri rýchlejšom pohybe myšou sa nevykreslí čiara, ale len jednotlivé body
dôvodom je, že Windows „si uvedomí“ pozíciu kur- zora len na tých bodoch, ktoré zobrazí.
riešenie:
z posledného známeho bodu ťahať čiaru do aktuálneho
na prvú pozíciu (keď stlačíme myš) je potrebné presunúť kresliaci kurzor (pozor, nie je to kurzor myši, je to pozícia, od ktorej začíname kresliť), pretože štandardne je na pozícii, na ktorej sme naposledy kreslili
do ďalších pozícií (pri stlačenej myši) už len ťaháme čiaru

16. Zmenený kód
procedure TForm1.Image1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
kreslenie:=true;
// nastavim kresliaci kurzor tam, kde klikla mys
Image1.Canvas.MoveTo(x,y);
end;
//****************************************************** 
procedure TForm1.Image1MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);
if kreslenie then
Image1.Canvas.LineTo(x,y); // taham ciaru do bodu x,y
//******************************************************
procedure TForm1.Image1MouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
kreslenie:=false;

17. Čo ďalej? máme nástroj na kreslenie čiar, zatiaľ sú však len čierne.
dokonalejšie grafické editory (t.j. dokonalejšie ako náš) majú k dispozícii zoznam farieb a kliknutím na niektorú z nich sa mení aj farba kreslenia
tento efekt vieme dosiahnuť napr. použitím komponentu Shape zo záložky Additional
pokiaľ sme postupovali presne podľa prednášky, nemáme pravdepodobne na ich umiestnenie miesto...

18. Panel a shape
vložme na formulár komponent Panel (záložka Standard) a nastavme mu vlastnosť Align na alBottom – tým získame v spodnej časti formulára priestor na vkladanie ďalších komponentov
panel bude v spodnej časti okna a Image v celom zvyšnom (má align nastavený na alClient).
pre zrušenie textu v paneli môžeme vymazať jeho vlastnosť Caption.
na panel umiestnime vedľa seba niekoľko Shape a nastavíme im rozličnú farbu (vlastnosť Brush – Color).

19. Nastavenie farieb
od vytvoreného „panela farieb“ by sme chceli, aby sa po kliknutí na shape zmenila farba kresliaceho pera.
prvý problém nastane vtedy, keď sa po dvojkliku na shape neukáže doposiaľ takmer štandardizovaná procedúra ShapeClick, ale len akási ShapeContextPopup. Dokonca ani po prepnutí sa na eventy shape nenájdeme udalosť OnClick.
nahradiť ju však môžeme udalosťou OnMouseUp, ktorá nastane v momente pustenia tlačidla myši. Pokojne by sme mohli využiť aj moment stlačenia (MouseDown), avšak štandardom Windows je práve odchytávanie pustenia myši.

20. Nastavenie farieb do kódu by sme pre túto udalosť napísali nasledovné:
procedure TForm1.Shape1MouseUp(...)
begin
Image1.Canvas.Pen.Color:=Shape1.Brush.Color;
end;
na panel umiestnime vedľa seba niekoľko Shape a nastavíme im rozličnú farbu (vlastnosť Brush – Color).
pre plátno obrázka (Image1.Canvas) zmeň jeho peru (Pen) farbu (Color) podľa farby, ktorá je nastavená pre Shape

21. A ďalší problém
na Shapoch máme k dispozícii niekoľko základných farieb.
Ak však chceme kresliť nezobrazenou farbou, sme v koncoch.
určite by bolo zaujímavé dovoliť používateľovi zmeniť farbu shapu alebo i viacerých podľa vlastného uváženia
mohli by sme tak urobiť na dvojklik, avšak Shape, ktorý sme si vybrali túto udalosť nepodporuje. Skúsme teda zmenu farby naviazať na pravé tlačidlo myši.
v prípade kliknutia ľavým tlačidlom sa farba zmení, v prípade pravého nech sa zobrazí ColorDialog, dovolí vybrať a napokon aj zmení na vybranú farbu.

22. Kód pred zmenu farby dopíšeme štyri riadky:
procedure TForm1.Shape6MouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
if Button=mbRight then begin
if ColorDialog1.Execute then
Shape6.Brush.Color:=ColorDialog1.Color;
end;
 // nasledujuci riadok sa vykona tak-ci onak ako pri stlaceni
// praveho tak i laveho tlacisla mysi – a to je to co potrebujeme
Image1.Canvas.Pen.Color:= Shape6.Brush.Color;
pred zmenu farby dopíšeme štyri riadky:
v prvom testujeme, či bolo stlačené pravé tlačidlo myši. Do procedúry vstupuje premenná Button, ktorá nás o stlačenom tlačidle informuje. Môže nadobúdať hodnoty mbLeft, mbRight, mbMiddle.
druhý riadok už poznáme z predchádzajúcej prednášky – vyvolá sa dialóg s farbami a v prípade potvrdenia farby...
... sa aktuálnemu Shape nastaví vybraná farba

23. Zoslušnenie programu
Každý slušný program, dokáže svoje produkty uložiť a následne aj otvoriť. A každý slušný program na to používa aj ikony uložené na paneli nástrojov farby:
na panel nástrojov sa z ponúkaných prostriedkov asi najviac hodí komponent ToolBar z Win32.
po vložení do formulára sa „nalepí“ na horný okraj avšak zmenou vlastnosti Align ho môžeme umiestniť aj k iným okrajom.
Toolbar obsahuje dva typy komponentov – tlačidlá (button) a medzery (separator). Vytvárame ich pravým tlačidlom a výberom zo získaného menu

24. Skrášlenie programu
vytvoreným tlačidlám však zasa chýbajú obrázky a Object inspector neponúka žiadne možnosti na ich výber...
Toolbar nepodporuje zadávanie obrázkov priamo, ale „ťahá“ ich z ImageListu (záložka Win32). Obrázky do tohto zoznamu vkladáme (aj odstraňujeme, aj meníme) dvojklikom.
zobrazí sa okno s možnosťami pridania, vymazania, prípadne exportu. Okrem nich možno ťahaním meniť aj poradie obrázkov.

25. Prepojenie
Vytvorený zoznam potom prepojíme na Toolbar cez jeho vlastnosť Images (pozor nie HotImages ani DisabledImages)
zvyčajne po tejto operácii automaticky nabehnú do tlačidiel obrázky. Pokiaľ nie, prípadne ak nie ste s ich určením spokojní, môžete pre dané tlačidlo zmeniť obrázok cez jeho vlastnosť ImageIndex.

26. Programovanie funkcií
ako v každom editore, aj tu budú prím hrať tlačidlá manipulujúce so súbormi.
ako prvú vytvoríme funkciu pre vymazanie obrázku.
bohužiaľ na túto operáciu neexistuje žiadny jednoduchý príkaz, preto sme zvyčajne nútený vymazať obrázok nakreslením bieleho obdĺžnika pre celú jeho plochu:
// nastavim farbu pozadia na bielu
Image1.Canvas.Brush.Color:=clWhite;
// a vykreslim nou obdlznik na celu plochu obrazka
Image1.Canvas.FillRect(Rect(0,0,Image1.Width, Image1.Height));
príkaz na vykreslenie plného obdĺžnika je FillRect, avšak jeho parametrom nie sú štyri rohy, ale obdĺžnik (TRect). Preto zadané štyri rohy musíme na obdĺžnik najprv skonvertovať – obdĺžnik typu TRect vytvára zo štyroch hodnôt funkcie Rect.
tento spôsob (cez ucho) je zvyčajne spôsobený určitými systémovými prístupmi Windowsu k elementárnym jednotkám – netreba si nad ním lámať hlavu, treba ho vziať taký, aký je :).
ak sa vám nepáči FillRect, pokojne použite i Rectangle – nakreslí obdĺžnik s nastavenou farbou obrysu a nastavenou farbou výplne

27. Image1.Picture.SaveToFile(nazov) Image1.Picture.LoadFromFile(nazov)
Uloženie a otvorenie
uloženie obrázku je veľmi jednoduché – možno použiť SaveDialog alebo SavePictureDialog s rovnakými funkciami a navyše zobrazením náhľadu na obrázok. Zápis sme už uviedli, samotné uloženie vyzerá nasledovne:
Image1.Picture.SaveToFile(nazov)
podobne otvorenie:
Image1.Picture.LoadFromFile(nazov)
manipulovať možno s obrázkami typu bmp, jpg, jpeg, wmf, emf, ico.
podmienkou používanie jpg formátu je uvedenie unitu jpeg do zoznamu unitov v klauzule uses.

28. Úlohy
Zistite, či je v čiernobielom obrázku viac čiernych alebo bielych bodov
Vykreslite zrkadlový obraz obrázka.
Porovnajte dva obrázky.
Zmenšite zadaný obrázok tak, aby jeho šírka obsahovala zadaný počet bodov a výška sa prispôsobila tak, aby nebol zdeformovaný.