Lekce 8 - Obrazce, práce s textem a kreslení na canvas

Nejprve mi dovolte, abych doplnil jeden nedostatek k věci, o které jsem se zmínil ve čtvrtém díle, a to o poznámkách (komentářích). Sám jsem to nevěděl, ale Frenky mi řekl, že {poznámka} se dá nahradit (poznámka). Hodí se to, když neumíte (nebo třeba nemůžete) naťukat na klávesnici {} a nebo když { či } chcete použít v poznámkách. Tak, to by bylo (díky, Franky) a teď postupme dál:

Se soubory a se zvuky už celkem pracovat umíte (aspoň doufám), takže pokročme k grafice. Obrázky už dávat umíte, obrazce (Shape) už také umíte vkládat, ale co taková grafika, které se mění? A bez hloupého blikání (zkuste si neustále měnit dva obrázky v Imageu! Budou blikat!). Důležité je ale mít kam kreslit. K tomu slouží Canvas, neboli plátno. A co se dělá normálně s plátnem? Kreslí se na něj, že? Zde je tomu také tak. Ale ne každý objekt plátno má! Zde napíšu pár hlavních objektů, které mají Canvas (a které znáte! : IMAGE, FORM

A to je vše! Možná vás to překvapí, ale víc by bylo vlastně zbytečné! Buď kreslíte přímo na okno a nebo, pokud chcete kreslit na panel, vložíte Image, který vám pouze umožní vytvořit obrázek. Budu sice pro ukázku používat Canvas Formu, ale Image má úplně stejnou! POZOR: Důležité je, kdy Canvas editujete. Předem vám říká, že psát to do procedury OnCreate nemá cenu! Form má pro tyto příkazy položku v Events (resp. proceduru) OnPaint. Image má tu výhodu, že zde si Canvas pamatuje to, co má na sobě a to si zachová. Zato Canvas Formu (okna) se po každém překrytí jiným oknem smaže (v přikrytých místech). Proceduru OnPaint kdykoli vyvoláme příkazem Invalidate. Př.: Form1.Invalidate;

Obrazce

Začněme nejprve tím, co už jakž takž umíme obrazce:

Obdélník

Rectangle(XBodu1, YBodu1, XBodu2, YBodu2);

V závorce zadáte souřadnice bodů, mezi kterými se obdélník nakreslí. Samozřejmě toto musíte napsat až za Canvas. Např.:

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

Pokud tedy tohle napíšete do procedury OnPaint, objeví se obdélník stejně, jako byste vložili Shape (stRectangle), Left nastavili na 10, Top na 20, Height na 80 a Width na 150. Co dál už umíme?

Elipsa

Ellipse(XBodu1, YBodu1, XBodu2, YBodu2);

Stejně jako u obdélníku zde nastavíte rozměry bodů, mezi kterými se nakreslí elipsa. Př.:

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

Opět je to stejné jako Shape(stEllipse) s výše uvedenými rozměry. Ale ještě něco umíme. Ale to už si teď ukážeme vylepšené:

Obdélník se zaoblenými rohy

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

První čtyři Integery jsou opět souřadnice dvou bodů Xroh je délka, kde se má v šířce začít zaoblení (od pravého rohu) a Yroh je to samé, akorát ve výšce. Např.:

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

Pokud tedy tohle napíšete do procedury OnPaint, objeví se obdélník stejně, jako byste vložili Shape (stRoundRect), Left nastavili na 10, Top na 20, Height na 80 a Width na 150. A dokonce zde (jak jste si mohli všimnout) můžete nastavit navíc rozměry zaoblení, což u Shapeu nejde! Díky nim vám můžu říct zajímavost. Pokud zadáte Xroh a Yroh jako nulu, bude RoundRect vypadat jako Rectangle a pokud bude platit, že XBodu2-XBodu1=Xroh a YBodu2-YBodu1=Yroh, bude RoundRect vypadat jako Ellipse. A to je z věcí, které jsme už jiným (jednodušším, ale s blikáním) způsobem uměli, vše.

Jdeme ale dál! Teď vám řeknu, jak můžete změnit styl kreslení (barvu, tloušťku pera atd.). JE to vlastně stejné jako u Shapeu.
Např.: Barvu výplně změníte takto:

Form1.Canvas.Brush.Color := clBlack;

A barvu a tloušťku pera takto:

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

Pokud jste to zapomněli, najdete to ve 3. části! Když už jsme u barev: Asi už vám dlouho vrtá, jak si určit jiné barvy, než ty pojmenované, že? Zde je řešení: Slouží k tomu příkaz RGB(Red, Green, Blue); Princip je velmi jednoduchý: Barvy na obrazovce vznikají tak, že jakoby tříbarevné lampičky mísí své světlo. Jedna má světlo červené, druhá zelené a třetí modré. U každé lampičky můžete nastavit sílu světla, které vydává a podle toho nám vznikne barva. Pokud zadáte u všeho sílu nula, vznikne černá (když není světlo, je tma a ta je černá, ne? ).

Místo Red tedy doplníte číslo od 0 do 255, které bude říkat, jak má svítit červená lampička. Green (také 0 až 255) bude zelené a Blue nám označuje sílu záře modrého světla (a samozřejmě také Integer od 0 do 255). Napíšete tedy třeba

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

a okno bude mít tmavě žluté pozadí. Pokud chcete zjistit, jaké barvy mají jaké souřadnice, klikněte dvakrát na položku Color v Object Inspectoru, v okénku klikněte na definovat vlastní barvy, kliknete někam do barevné palety a vpravo dole máte napsány čísla síly barevných světel (RGB souřadnice barvy).

Vraťme se zpět k plátnu... Jediný základní geometrický útvar, který lze na počítači zakreslit a který nám chybí je úsečka. S ní je ale problém. Má totiž pouze cílový bod. Na plátně někde počítač skončí a z té pozice kreslí dál, pokud mu nezadáme jinou souřadnici, kde má začít. Obdélník už ji obsahuje, ale LINE (úsečka - v překladu čára nebo přímka, ale přímku zde prostě nenakreslíte!) ne! A proto je zde příkaz MoveTo(X, Y);, který se samozřejmě používá v Canvas:

Form1.Canvas.MoveTo(118, 253);

Pokud jste byli netrpěliví a už jste zkusili nakreslit Line, zjistili jste, že to nefunguje. Příkaz totiž nezní Line(=čára), ale LineTo(=čára k...). Tedy LineTo(X,Y);. Chceme-li tedy nakreslit čáru třeba z bodu zleva 20 a shora 15 do místa se souřadnicemi X=100 Y=5, napíšeme:

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

A je to! Máme krásnou čáru. Jestli jí chcete udělat širší, stačí změnit Pen.Width na vyšší a je to! A je to! A je to! A ještě jednou...

Aj, nechal jsem se unést! Ještě vám chci říct, že se budou geometrické útvary překrývat, takže třeba u terče musíte začít největším kruhem, pak kreslit menší a ještě menší až k nejmenšímu!

Práce s textem

To je ze základů grafiky asi tak vše, takže přistupme k textům! Je to klasické ve Windows, ale vy to ani neumíte v Delphi. A to je chyba, kterou musím napravit.

Kopírování

Copy(Napis, OdZnaku, PocetZanku);

Napis je název proměnné typu string, OdZnaku je pořadové číslo znaku, který má být první kopírován a PocetZnaku je počet znaků, které se okopírují. Takže pokud zadáte:

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

Bude Napis2 "e to!". A je to to samé jako:

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

OK? Snad ano! Jdeme totiž dál:

Délka textu

To už mezi standartní funkce Windows nepočítám, ale prostě to lze. Stačí pouze:

Length(Napis);

Místo Napis doplníte jakýkoli string. Např.:

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

A Cislo (Integer) bude 29.

Podřetězce

Dále také lze zjistit, kde je v textu nějaké písmeno (nebo i slovo):

Pos(Slovo, VNapisu);

Místo Slovo doplníme string, o němž zjišťujeme, na jaké pozici se nachází ve stringu VNapisu. Př.:

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

A Integer Cislo tentokrát vyjde 12. Pokud zjištujeme pozici písmena, lze to udělat opačně. Zjistit, jaké písmeno je v textu třeba dvanácté. Pro to slouží hranatá závorka za nápisem.
Př.:

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

String Napis2 tedy bude "č". Na dvanáctém místě ve stringu Napis1 je totiž "č"!

Paintbox

Možná se vám nebude líbit, že skáču od jednoho ke druhému, ale teď přestupujeme k objektům a já vám ukážu jeden, který je určený k tomu, aby se na něj kreslilo! Je stejný, jako image, akorát do něj můžeme jedině kreslit a je to o něco rychlejší, než kreslení do Image. Ale kresba nevydrží! Zde opět musíme používat proceduru OnPaint. Tento objekt naleznete v položce System, vedle Timeru. Je to PAINTBOX.

Nemá žádné speciality a tak jsem se jejím popisem vyčerpal!

ColorDialog

Již jsme probírali RGB barvy a tak vám musím říct o objektu z položky Dialogs:

COLORDIALOG - Je šestý zleva a v Object Inspectoru naleznete hlavně:

• Color - barva, kterou si v dialogovém okně někdo vybral. Používá se stejně, jako ostatní dialogy. Napíšte ColorDialog1.E­xecute; a máte ho otevřený!

ColorGrid

Dále bych vám měl říct o objektu ze Samples: COLORGRID - Je druhý zleva a slouží k vybrání barev, kterými se bude kreslit. Stejný objekt je použit určitě v Image editoru. Vyberete si levým talčítkem barvu pera a pravým barvu pozadí. V Object Inspectoru u ColorGridu naleznete:

• BackgroundEnabled - Boolean. Nastavíte, zda lze měnit barva pozadí
• BackgroundIndex - Cislo barvy, která bude vybrána jako pozadí
• ForegroundEnabled - Boolean. Nastavíte, zda lze měnit barva pera
• ForegroundIndex - Cislo barvy, která bude vybrána jako barva pera
• GridOrdering - Rozměry tabulky s barvami.

A jak zjistíme, která barva je vybraná? Buď podle čísla barvy a nebo podle: BackgroundColor a ForgroundColor. Takže např.:

Form1.Color := ColorGrid1.BackgroundColor;

Ještě chi upozornit na položku Ctl3D. Byla už u více objektů a já ji ignoroval, Teď mi došlo, že by se vám třeba hodila. Nastavíte pomocí ní, jestli se má objekt kreslit plasticky, nebo jen jako placka! U něčeho to totiž moc dobře nefungovalo!

FontDialog

Ještě jednou se vrátíme do Dialogs, kde je pátý zleva: FONTDIALOG - Zde si uživatel vybere vlastní font. V Object Inspectoru naleznete jedinou specialitu, která vás asi nepřekvapí:

• Font - prostě font, který si uživatel zvolil, ne?

Používá se také stejně, jako ostatní dialogy. Napíšte FontDialog1.E­xecute; a je to.

ColorBox

Dále zase skočíme do výběru barev a řekneme si o objektu z Additional: COLORBOX - Jakoby takový Edit s šipečkou vpravo, kde si vyberete jinou barvu. Jedine na co si v Object Inspectoru musíte dát pozor je:

• Color - Není vybraná barva, ale barva POZADÍ ColorBoxu!!!
• Selected - To je to, co chceme! Barva, která je zvolená!

A tím tato část návodu končí. Už jenom vámi snad toužený a mnou obávaný příklad:

Program

A je tu konec návodu. Takže by to chtělo skrnutí: Tentokrát to bude trochu jiné. Umíme už vkládat poznámky do programu a tak vám ukážu obsah jediné procedury (OnPaint Okna), kde jsou průběžné poznámky, jak se 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 také! Klauna máte nakresleného a příště se můžete těšit na pokračování práce s grafikou...

...Kukensius

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.