8. diel - Obrazce, práca s textom a kreslenie na canvas

Najprv mi dovoľte, aby som doplnil jeden nedostatok k veci, o ktorej som sa zmienil vo štvrtom diele, a to o poznámkach (komentároch). Sám som to nevedel, ale Frenky mi povedal, že {poznámka} sa dá nahradiť (poznámka). Hodí sa to, keď neviete (alebo napríklad nemôžete) naťukať na klávesnici {} a alebo keď {či} chcete použiť v poznámkach. Tak, to by bolo (vďaka, Franky) a teraz postup ďalej:

So súbormi a so zvukmi už celkom pracovať viete (aspon dúfam), takže pokročme k grafike. Obrázky už dávať viete, obrazce (Shape) už tiež viete vkladať, ale čo taká grafika, ktoré sa menia? A bez hlúpeho blikania (skúste si neustále meniť dva obrázky v Imagéo! Budú blikať!). Dôležité je ale mať kam kresliť. K tomu slúži Canvas, čiže plátno. A čo sa robí normálne s plátnom? Kreslí sa na neho, že? Tu je tomu tiež tak. Ale nie každý objekt plátno má! Tu napíšem pár hlavných objektov, ktoré majú Canvas (a ktoré poznáte! : IMAGE, FORM

A to je všetko! Možno vás to prekvapí, ale viac by bolo vlastne zbytočné! Buď kreslíte priamo na okno a alebo, ak chcete kresliť na panel, vložíte Image, ktorý vám iba umožní vytvoriť obrázok. Budem síce pre ukážku používať Canvas Formu, ale Image má úplne rovnakú! POZOR: Dôležité je, kedy Canvas editujete. Vopred vám hovorí, že písať to do procedúry OnCreate nemá cenu! Form má pre tieto príkazy položku v Events (resp. Procedúru) OnPaint. Image má tú výhodu, že tu si Canvas pamätá to, čo má na sebe a to si zachová. Zato Canvas Formu (okná) sa po každom prekrytie iným oknom zmaže (v prikrytých miestach). Procedúru OnPaint kedykoľvek vyvoláme príkazom Invalidate. Pr .: Form1.Invalidate;

Obrazce

Začnime najprv tým, čo už ako-tak vieme obrazce:

Obdĺžnik

Rectangle(XBodu1, YBodu1, XBodu2, YBodu2);

V zátvorke zadáte súradnice bodov, medzi ktorými sa obdĺžnik nakreslí. Samozrejme toto musíte napísať až za Canvas. napr .:

Form1.Canvas.Rectangle(10, 20, 160, 100);

Ak teda toto napíšete do procedúry OnPaint, objaví sa obdĺžnik rovnako, ako by ste vložili Shape (stRectangle), Left nastavili na 10, Top na 20, Height na 80 a Width na 150. Čo ďalej už vieme?

Elipsa

Ellipse(XBodu1, YBodu1, XBodu2, YBodu2);

Rovnako ako u obdĺžniku tu nastavíte rozmery bodov, medzi ktorými sa nakreslí elipsa. Pr .:

Form1.Canvas.Ellipse(10, 20, 160, 100);

Opäť je to rovnaké ako Shape (stEllipse) s vyššie uvedenými rozmermi. Ale ešte niečo vieme. Ale to už si teraz ukážeme vylepšené:

Obdĺžnik so zaoblenými rohmi

RoundRect(XBodu1, YBodu1, XBodu2, YBodu2, Xroh, Yroh);

Prvé štyri integer sú opäť súradnice dvoch bodov Xroh je dĺžka, kde sa má v šírke začať zaoblenie (od pravého rohu) a Yroh je to isté, akurát vo výške. napr .:

Form1.Canvas.RoundRect(10, 20, 160, 100, 20, 15);

Ak teda toto napíšete do procedúry OnPaint, objaví sa obdĺžnik rovnako, ako by ste vložili Shape (stRoundRect), Left nastavili na 10, Top na 20, Height na 80 a Width na 150. A dokonca tu (ako ste si mohli všimnúť) môžete nastaviť navyše rozmery zaoblenia, čo u Shapeu nejde! Vďaka nim vám môžem povedať zaujímavosť. Ak zadáte Xroh a Yroh ako nulu, bude RoundRect vyzerať ako Rectangle a pokiaľ bude platiť, že XBodu2-XBodu1 = Xroh a YBodu2-YBodu1 = Yroh, bude RoundRect vyzerať ako Ellipse. A to je z vecí, ktoré sme už iným (jednoduchším, ale s blikaním) spôsobom vedeli, všetko.

Ideme ale ďalej! Teraz vám poviem, ako môžete zmeniť štýl kreslenia (farbu, hrúbku pera atď.). JE to vlastne rovnaké ako u Shapeu.
Napr .: Farbu výplne zmeníte takto:

Form1.Canvas.Brush.Color := clBlack;

A farbu a hrúbku pera takto:

Form1.Canvas.Pen.Color := clBlue;
Form1.Canvas.Pen.Width := 5;

Ak ste to zabudli, nájdete to v 3. časti! Keď už sme pri farieb: Asi už vám dlho vŕta, ako si určiť iné farby, ako tie pomenované, že? Tu je riešenie: Slúži na to príkaz RGB (Red, Green, Blue); Princíp je veľmi jednoduchý: Farby na obrazovke vznikajú tak, že akoby trojfarebné lampičky mieša svoje svetlo. Jedna má svetlo červenej, druhá zelenej a tretia modré. Pri každej lampičky môžete nastaviť silu svetla, ktoré vydáva a podľa toho nám vznikne farba. Ak zadáte u všetkého silu nula, vznikne čierna (keď nie je svetlo, je tma a tá je čierna, nie? ).

Miesto Red teda doplníte číslo od 0 do 255, ktoré bude hovoriť, ako má svietiť červená lampička. Green (tiež 0 až 255) bude zelené a Blue nám označuje silu žiara modrého svetla (a samozrejme tiež Integer od 0 do 255). Napíšete teda potrebné

Form1.Color := RGB(150,150,0);

a okno bude mať tmavo žlté pozadie. Ak chcete zistiť, aké farby majú aké súradnice, kliknite dvakrát na položku Color v Object Inspector, v okienku kliknite na definovať vlastné farby, kliknete niekam do farebnej palety a vpravo dole máte napísané čísla sily farebných svetiel (RGB súradnice farby).

Vráťme sa späť k plátnu ... Jediný základné geometrický útvar, ktorý možno na počítači zakresliť a ktorý nám chýba je úsečka. S ňou je ale problém. Má totiž len cieľový bod. Na plátne niekde počítač skončí az tej pozície kreslí ďalej, pokiaľ mu nezadáme inú súradnicu, kde má začať. Obdĺžnik už ju obsahuje, ale LINE (úsečka - v preklade čiara alebo priamka, ale priamku tu jednoducho nenakreslíte!) Nie! A preto je tu príkaz MOVETO (X, Y) ;, ktorý sa samozrejme používa v Canvas:

Form1.Canvas.MoveTo(118, 253);

Ak ste boli netrpezliví a už ste skúsili nakresliť Line, zistili ste, že to nefunguje. Príkaz totiž neznie Line (= čiara), ale Linette (= čiara k ...). Teda Linet (X, Y) ;. Ak teda chceme nakresliť čiaru treba z bodu zľava 20 a zhora 15 do miesta so súradnicami X = 100 Y = 5, napíšeme:

MoveTo(20,15);
LineTo(100,5);

A je to! Máme krásnu čiaru. Ak jej chcete urobiť širšie, stačí zmeniť Pen.Width na vyššiu a je to! A je to! A je to! A ešte raz ...

Hľa, nechal som sa uniesť! Ešte vám chcem povedať, že sa budú geometrické útvary prekrývať, takže treba u terča musíte začať najväčším kruhom, potom kresliť menšie a ešte menšie až k najmenšiemu!

Práca s textom

To je zo základov grafiky asi tak všetko, takže pristúpme k textom! Je to klasické vo Windows, ale vy to ani neviete v Delphi. A to je chyba, ktorú musím napraviť.

Kopírovanie

Copy(Napis, OdZnaku, PocetZanku);

Napis je názov premennej typu string, odznak je poradové číslo znaku, ktorý má byť prvý kopírovaný a PocetZnaku je počet znakov, ktoré sa skopírujú. Takže ak zadáte:

Napis1 := 'A je to!';
Napis2 := Copy(Napis1, 4, 5);

Bude Napis2 "e to!". A je to to isté ako:

Napis2 := Copy('A je to!', 4, 5);

OK? Snáď áno! Ideme totiž ďalej:

Dĺžka textu

To už medzi štandardnú funkcie Windows nepočítam, ale jednoducho to dá. Stačí iba:

Length(Napis);

Namiesto Napis doplníte akýkoľvek string. napr .:

Cislo := Length('Kukensius je trouba a mamlas!');

A Cislo (Integer) bude 29.

Podreťazca

Ďalej tiež možno zistiť, kde je v texte nejakej písmeno (alebo i slovo):

Pos(Slovo, VNapisu);

Namiesto Slovo doplníme string, o ktorom zisťujeme, na akej pozícii sa nachádza v stringu VNapisu. Pr .:

Napis := 'Ty jsi ale prase, kamaráde!';
Cislo := Pos('prase', Napis);

A Integer Cislo tentoraz vyjde 12. Ak zisťujeme pozíciu písmená, možno to urobiť opačne. Zistiť, aké písmeno je v texte treba dvanástej. Pre to slúži hranatá zátvorka za nápisom.
Pr .:

Napis1 := 'Ty jsi ale čuně, kamaráde!';
Napis2 := Napis1[12];

String Napis2 teda bude "č". Na dvanástom mieste vo stringu Napis1 je totiž "č"!

Paintbox

Možno sa vám nebude páčiť, že skáčem od jedného k druhému, ale teraz prestupujeme k objektom a ja vám ukážem jeden, ktorý je určený na to, aby sa na neho kreslilo! Je rovnaký, ako imidž, akurát do neho môžeme jedine kresliť a je to o niečo rýchlejší, než kreslenie do Image. Ale kresba nevydrží! Tu opäť musíme používať procedúru OnPaint. Tento objekt nájdete v položke System, vedľa Timeru. Je to PAINTBOX.

Nemá žiadne špeciality a tak som sa jej popisom vyčerpal! : D

ColorDialog

Už sme preberali RGB farby a tak vám musím povedať o objekte z položky dialogs:

COLORDIALOG - Je šiesty zľava a v Object Inspector nájdete hlavne:

• Color - farba, ktorú si v dialógovom okne niekto vybral. Používa sa rovnako, ako ostatné dialógy. Napíšte ColorDialog1.E­xecute; a máte ho otvorený!

ColorGrid

Ďalej by som vám mal povedať o objekte zo Samples: COLORGRID - Je druhý zľava a slúžia na vybranie farieb, ktorými sa bude kresliť. Rovnaký objekt je použitý určite v Image editore. Vyberiete si ľavým tlačítkom farbu pera a pravým farbu pozadia. V Object Inspector u ColorGridu nájdete:

• BackgroundEnabled - Boolean. Nastavíte, či možno meniť farba pozadia
• BackgroundIndex - Cislo farby, ktorá bude vybraná ako pozadie
• ForegroundEnabled - Boolean. Nastavíte, či možno meniť farba pera
• ForegroundIndex - Cislo farby, ktorá bude vybraná ako farba pera
• GridOrdering - Rozmery tabuľky s farbami.

A ako zistíme, ktorá farba je vybraná? Buď podľa čísla farby a alebo podľa: BackgroundColor a ForgroundColor. Takže napr .:

Form1.Color := ColorGrid1.BackgroundColor;

Ešte chi upozorniť na položku Ctl3D. Bola už na viacerých objektoch a ja ju ignoroval, Teraz mi došlo, že by sa vám napríklad hodila. Nastavíte pomocou nej, či sa má objekt kresliť plasticky, alebo len ako placka! U niečoho to totiž veľmi dobre nefungovalo!

FontDialog

Ešte raz sa vrátime do dialogs, kde je piaty zľava: FONTDIALOG - Tu si užívateľ vyberie vlastný font. V Object Inspector nájdete jedinú špecialitu, ktorá vás asi neprekvapí:

• Font - proste font, ktorý si užívateľ zvolil, nie?

Používa sa tiež rovnako, ako ostatné dialógy. Napíšte FontDialog1.E­xecute; a je to.

ColorBox

Ďalej zase skočíme do výberu farieb a povieme si o objekte z Additional: COLORBOX - Akoby taký Edit s sipecka vpravo, kde si vyberiete inú farbu. Jedine na čo si v Object Inspector musíte dať pozor je:

• Color - Nie je vybraná farba, ale farba POZADIE ColorBoxu !!!
• Selected - To je to, čo chceme! Farba, ktorá je zvolená!

A tým táto časť návodu končí. Už len vami snáď túžený a mnou obávaný príklad:

Program

A je tu koniec návodu. Takže by to chcelo skrnutí: Tentoraz to bude trochu iné. Vieme už vkladať poznámky do programu a tak vám ukážem obsah jedinej procedúry (OnPaint Okná), kde sú priebežné poznámky, ako sa program zachová:

procedure TOkno.FormPaint(Sender: TObject);
begin
  //nejprve změním barvu pozadí
  Canvas.Brush.Color := RGB(250,230,190);
  //nakreslím levé ucho
  Canvas.Ellipse(20, 130, 100, 230);
  //teď pravé ucho
  Canvas.Ellipse(250, 130, 330, 230);
  {zbytky uší musím překrýt obrysem hlavy (sice plešaté, ale to vám zatím musí stačit)}
  Canvas.Ellipse(50, 50, 300, 320);
  {teď budu kreslit oči
  proto musím nejprve změnit barvu pozadí (bělma)}
  Canvas.Brush.Color := clWhite;
  {nyní nakreslím bělma očí (levé a pak pravé)}
  Canvas.Ellipse(90,130,145,165);
  Canvas.Ellipse(205,130,260,165);
  {uděláme třeba modrookého - to je jedno stačí změnit barvu!}
  Canvas.Brush.Color := clBlue;
  {a teď po změně barvy můřu začít kreslit duhovky (zas levou a pak pravou)}
  Canvas.Ellipse(104,134,131,161);
  Canvas.Ellipse(219,134,246,161);
  {pořád ale vypadá slepě! Co takhle mu udělit také panenky?
  nejprve změním barvu! Duhovky bývají černé}
  Canvas.Brush.Color := clBlack;
  {opět udělám nejdřív levou a pak pravou}
  Canvas.Ellipse(112,142,123,153);
  Canvas.Ellipse(227,142,238,153);
  {teď by se hodilo udělat třeba nos. Já si to ale zjednodušším a udělám z panáka klauna
  klaunský nos je rudý - ne od krve!}
  Canvas.Brush.Color := clRed;
  {tentokrát vás však zklamu. Nos je jenom jeden!}
  Canvas.Ellipse(145, 165, 205, 225);
  {a teď postupme dál: uděláme pusu. Když už je to klaun, nakreslíme mu okolo takovéto bílé kolečko}
  Canvas.Brush.Color := clWhite;
  {líčení by ale černý obrys mít nemělo! Stříbrný bude lepší!}
  Canvas.Pen.Color := clSilver;
  //a teď už můžeme líčit:
  Canvas.Ellipse(100, 230, 250, 300);
  {sice je nalíčený, ale nemá pusu.
  Budeme experimentovat a uděláme jí pomocí tlusté, červené čáry}
  Canvas.Pen.Width := 11;
  Canvas.Pen.Color := clRed;
  {A teď uděláme čáru z 120,265 do 230,265}
  Canvas.MoveTo(120, 265);
  Canvas.LineTo(230, 265);
  {ještě jsem vám neukázal příklad čtverce.
  vlasy by byly příliš složité a tak dáme klaunovi klobouk!
  Skoro černý (spíš k modré)!}
  Canvas.Brush.Color := RGB(10, 10, 60);
  {před nakreslením klobouku dáme nastavení pera do pořádku}
  Canvas.Pen.Width := 1;
  Canvas.Pen.Color := clBlack;
  {Teď můžeme nakresli hlavní část klobouku}
  Canvas.RoundRect(70, 10, 280, 115, 25, 25);
  {a z klauna je nádražák! My jsme ale řekli klobouk!
  Musím udělat ještě ten obrouček}
  Canvas.Rectangle(50, 105, 300, 115);
  {Klaun je hotov!}
end;

A program je hotový tiež! Klauna máte nakresleného a nabudúce sa môžete tešiť na pokračovanie práce s grafikou ...

... Kukensius

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.