Grafická plocha

Grafická plocha s vnútorným menom Image, ktorú sme si už spomínali, je zo záložky Additional a je jedným z najdôležitejších komponentov. Komponent Image predstavuje obdĺžnikovú oblasť, do ktorej môžeme kresliť, písať, môžeme ju uložiť na disk, prípadne zo súboru do nej prečítať nejaký obrázok. Vo formulári môžeme mať týchto komponentov niekoľko (Image1, Image2, Image3,...), no najskôr sa naučíme pracovať len s jedným.

Každá grafická plocha v prostredí Lazarus má svoje plátno, do ktorého kreslíme (je podobné plátnu v obrazoch), nazývame ho Canvas. Na plátno kreslíme grafickým nástrojom pero - Pen, a vyfarbujeme nejaké plochy grafickým nástrojom štetec - Brush, ktoré majú svoje farby Color, pričom grafickému nástroju pero môžeme nastaviť aj hrúbku - Width. Na plátno môžeme taktiež písať texty, ktorým môžeme nastaviť typ písma Font.

Po vložení Image do formulára sa nám zobrazí obdĺžnik označený čiernymi štvorčekmi (podobne ako pri vložení tlačidla), pomocou ktorých môžeme upravovať jeho veľkosť. Aby sme vedeli presne určiť polohu nejakého obrázka vo vnútri Image, je potrebná súradnicová sústava, ktorá je ale vo Windows natočená trochu inak, ako ju poznáme z matematiky. Ľavý horný roh má súradnice [0, 0] - to je počiatok. Súradnica X smeruje zľava doprava na hornom okraji plochy a súradnica Y smeruje zhora nadol pri ľavom okraji plochy. (Niekedy majú zmysel aj záporné súradnice, aj keď tieto popisujú body mimo plochy.)

Všetky grafické príkazy začínajú dvoma slovami Image1.Canvas, ktoré sú spojené bodkou.
Za tieto dve slová opäť za bodku píšeme príkaz, ktorý sa má vykonať na plátno obrazu.
Grafickými príkazmi sú napr. Rectangle (štvorec, obdĺžnik), Ellipse (elipsa, kruh), TextOut (text), MoveTo (začiatok úsečky), LineTo (koniec úsečky).

Do formulára si teraz môžeme vložiť zo záložky Additional komponent Image, pričom kresliť budeme pomocou akcie pri stlačení tlačidla, t. j. do procedúry Button1Click zapíšeme grafické príkazy medzi begin a end. Použijeme príkaz TextOut a zapíšeme na grafické plátno text Ahoj. (obr. 18)

obr. 18 Výpis textu na grafické plátno

Všimnime si zápis príkazu:

Ako sme si už povedali, príkaz začína slovami Image1 a Canvas (spojené bodkou), teda kreslíme na Plátno v Grafickej ploche
Nasleduje príkaz TextOut, ktorý má tri parametre; prvé dva sú celočíselné a udávajú polohu vypisovaného textu, tretí parameter je samotný text ohraničený apostrofmi (klávesová skratka ALT+39)
Parametre príkazu sú uvádzané v okrúhlych zátvorkách, pričom sú oddelené čiarkami.

Po spustení programu grafická plocha zobrazená nie je (obr. 19), ale po stlačení tlačidla sa vykoná akcia a dostávame vypísaný text (obr. 20).

obr. 20 Výpis textu na grafickú plochu

V prostredí Lazarus je grafická plocha zafarbená načierno, avšak viac nám bude vyhovovať biele pozadie grafickej plochy. Preto si do formulára vložíme ďalšie tlačidlo, ktorému priradíme akciu zmazania obsahu plochy bielou farbou. Grafickú plochu budeme takto mazať aj v budúcnosti, keď budeme v prostredí vytvárať grafické projekty. Tlačidlu s názvom Button2 priradíme akciu (obr. 21):

obr. 21 Mazanie grafickej plochy

Zmazanie grafickej plochy umožní jednoduchý príkaz FillRect, ktorý celú plochu zafarbí farbou štetca (Brush) s prednastavenou bielou farbou. Tento príkaz môžeme priradiť buď novému tlačidlu, pomocou ktorého budeme mazať grafickú plochu, alebo ho zapíšeme pred ostatné príkazy (obr. 22):

obr. 22 Výpis textu na zmazanú grafickú plochu

Ak by sme chceli, aby bola grafická plocha zafarbená na bielo už pri štarte, využijeme inicializačnú procedúru FormCreate, ktorá sa spúšťa automaticky. Vytvoríme ju dvojklikom do plochy formulára (mimo grafickej plochy a tlačidiel). Po jej vytvorení môžeme vpísať príkaz pre mazanie plochy (viď vyššie obr. 21 ).

Pri práci s textom (a grafickou plochou vôbec) môžeme meniť nastavenia farby, veľkosti, štýlu,... Základnými nastaveniami pri texte môžu byť:

názov písma

veľkosť písma

výška písma

farba písma

štýl písma

Font.Name

Font.Size

Font.Height

Font.Color

Font.Style

Štýl písma (obr. 23) sa uvádza do hranatých zátvoriek (ľavá zátvorka ALT+91, pravá zátvorka ALT+93), do ktorých sa vymenujú atribúty písma:

fsBold (tučné), fsItalic (kurzíva), fsUnderline (podčiarknuté), fsStrikeOut (prečiarknuté).

Ďalší grafický príkaz je Rectangle, pomocou ktorého budeme kresliť obdĺžniky. Má 4 vstupné parametre: sú to celé čísla a označujú súradnice dvoch bodov - ľavý horný a protiľahlý, t. j. pravý dolný roh. (obr. 24) Týmito dvoma bodmi je obdĺžnik jednoznačne určený. Treba si zapamätať, že tieto súradnice musia byť vždy celé čísla a jednotkou sú pixle.

Skúsme si teraz nakresliť obdĺžnik so súradnicami ľavého horného rohu [10, 30] a pravého dolného rohu [100, 150], pričom prvé číslo označuje X-ovú a druhé Y-ovú súradnicu.

Pokiaľ sme doteraz nemenili nastavenia, tak obdĺžnik sa nakreslí s čiernym obrysom a hrúbkou pera 1 a vyplní sa bielou farbou štetca. Tieto vlastnosti však môžeme meniť, pričom je potrebné dodržovať syntax jazyka (pravidlá zápisu). Ak by sme najskôr nakreslili obdĺžnik a až potom chceli meniť jeho vlastnosti, tak po prvom kliknutí na tlačidlo sa nakreslí obdĺžnik s prednastavenými hodnotami a až po druhom kliknutí sa tieto nastavenia zmenia.

Nakreslime obdĺžnik s obrysovou čiarou modrou, hrúbkou pera 15 a vyplnený bude červenou farbou (obr 25).

obr. 25 Príkazy na kreslenie obdĺžnika

Doteraz sme si vysvetlili, čo znamenajú slová Image1 a Canvas. Teraz je potrebné, aby sme poznali aj zvyšok príkazu.

Prvý riadok príkazu sme si už tiež vysvetlili, ide teda o mazanie grafickej plochy bielou farbou.
Ďalší riadok príkazu znamená že na Plátno Obrazu budeme písať (kresliť) perom (Pen), ktorého farba (Color) bude modrá (clBlue).
V ďalšom riadku nastavujeme tiež vlastnosť pera (Pen.Width), ale tentokrát nastavujeme jeho šírku (resp. hrúbku).
Ešte predtým, ako nakreslíme samotný obdĺžnik, nastavíme farbu jeho výplne pomocou štetca (Brush), ktorému priradíme (tentokrát) červenú farbu (clRed).
Následne nakreslíme obdĺžnik s parametrami (súradnicami bodov). Po spustení programu získavame (obr. 26):

obr. 26 Vykreslenie obdĺžnika na grafickú plochu

Ďalšími preddefinovanými farbami v Lazaruse sú napríklad:

clBlack čierna clGreen zelená

clRed červená clBlue modrá

clYellow žltá clWhite biela

clGray šedá clLime limetková

clAqua, clFuchsia, clMaroon, clSilver, clSkyBlue, a i.

Farba je však len jednou z vlastností pera a štetca. Každému môžeme nastaviť aj štýl.

Štýl pera (Pen.Style) môže nadobúdať hodnoty:

psSolid plná čiara

psDash čiarkovaná (prerušovaná) čiara

psDot bodkovaná čiara

psDashDot, psDashDotDot, psClear,...

Štýl štetca (Brush.Style) môže nadobúdať tieto hodnoty:

bsSolid úplná výplň

bsHorizontal vodorovné čiary (šrafovanie)

bsVertical zvislé šrafovanie

bsBdiagonal šrafovanie naklonené

bsFDiagonal šrafovanie naklonené doľava

bsCross mriežka

bsDiagCross naklonená mriežka

bsClear útvar bude bez výplne

Nakreslime pomocou jedného tlačidla niekoľko obdĺžnikov, ktoré budú mať rôznu hrúbku, farbu a štýl pera (riešenie: obr. 27).

Ak by sme chceli nakresliť kružnicu či elipsu, použijeme grafický príkaz Ellipse (obr. 28), ktorá podobne ako Rectangle pracuje so štyrmi vstupnými parametrami. Vytvoríme pomyselný obdĺžnik (štvorec), do ktorého vpíšeme elipsu (kruh).

obr. 28 Príkazy na úpravu a kreslenie elipsy/kruhu

Po spustení programu (F9) sa nám zobrazí (obr. 29):

obr. 29 Vykreslenie elipsy na grafickú plochu

Rovnako, ako aj pri kreslení obdĺžnika môžeme upravovať hrúbku pera, štýl čiary, farbu výplne, štýl výplne a pod.

Často používaná je aj dvojica grafických príkazov MoveTo a LineTo. Pomocou oboch presúvame grafické pero na nové pozície. Rozdiel medzi týmito dvoma príkazmi je v tom, že MoveTo nekreslí čiary, ale nastaví začiatok úsečky a LineTo kreslí čiary nastavenou farbou a hrúbkou, nastaví koniec úsečky. Napríklad pomocou týchto príkazov môžeme jednoducho nakresliť číslo sedem (obr. 30).

Niekedy sa používa príkaz Line, ktorý nahrádza dvojicu príkazov MoveTo a LineTo. Namiesto

Image1.Canvas.MoveTo (X1, Y1);

Image1.Canvas.LineTo (X2, Y2);

môžeme zapísať

Image1.Canvas.Line (X1, Y1, X2, Y2);