8. díl - Obrazce, práce s textem a kreslení na canvas

Ostatní jazyky Delphi 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! :D

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


 

Stáhnout

Staženo 356x (200.45 kB)
Aplikace je včetně zdrojových kódů v jazyce Delphi

 

  Aktivity (1)

Článek pro vás napsal Kukensius
Avatar
Jméno: Lukáš Kučera alias Kukensius<br/> Narození: říjen 1987 (ve znamení vah)<br/> Bydliště: Jihlava, Česká Republika<br/> Studium: 1. ročník magisterského studia<br/> Škola: Vysoké učení technické v Brně<br/> Fakulta: Fakulta elektrotechniky ...

Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!


 


Miniatura
Všechny články v sekci
Delphi
Miniatura
Následující článek
Bitmapy a vlastní malování

 

 

Komentáře

Avatar
Wilí Zanej
Neregistrovaný
Avatar
Wilí Zanej:

čau měl bych jeden dotázek...když neco nakreslim a chci aby se to po dobehnuti timeru smazalo,můžu to kreslit pres canvas ?

 
Odpovědět 2.1.2014 9:58
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.