Lazarus - Kreslenie

Dnes budeme trochu kresliť. Namaľujeme si štvorce, kruhy, čiary,... Nie však na papier, ale na formulár v Lazaruse.

Čo budeme potrebovať

Kresliť sa dá prakticky na akýkoľvek komponent, ktorý má vlastnosť Canvas - grafické plátno. Patrí tu aj formulár (Form), ale ten má jednu nevýhodu - všetko, čo na jeho plátno nakreslíme, sa po prekrytí iným oknom zmaže. Tomu sa, samozrejme, dá zabrániť, ale načo si zbytočne komplikovať život. Na kreslenie budeme používať komponent Image, ktorý je na to presne určený.

Budeme pracovať v súradnicovej sústave. Jej začiatok je v ľavom hornom rohu komponentu, na ktorý kreslíme. Má súradnice X = 0, Y = 0; ináč povedané [0, 0]. Jednotkou sú pixle.

Môžeme začať

Na formulár umiestnime komponent Image z palety Additional a pomenujme ho imgObraz. Pridáme jedno tlačidlo a jeho udalosti OnClick priradíme kód:

imgObraz.Canvas.Pen.Color := clGreen;
imgObraz.Canvas.Line(10, 10, 130, 120);

Najprv sme nastavili farbu pera (Pen.Color) pre plátno komponentu imgObraz. Potom sme na toto plátno nakreslili čiaru začínajúcu na súradniciach [X=10, Y=10] a končiacu na [X=130, Y=120].

Vlastnosti pera

Každý objekt typu TCanvas má vlastnosť Pen - grafické pero, používané na kreslenie obvodov útvarov (obdĺžnik, atď.) a čiar. Vlastnosť Pen má ďalšie podvlastnosti. Color určuje farbu pera, Width jeho hrúbku (v pixloch). Style znamená štýl - môže nadobúdať hodnoty psSolid (plná čiara), psDash (čiarkovaná), psDot (bodkovaná) a iné.

Červenú vodorovnú čiaru hrúbky 15px teda nakreslíme napríklad takto:

imgObraz.Canvas.Pen.Color := clRed;
imgObraz.Canvas.Pen.Width := 15;
imgObraz.Canvas.Line(20, 20, 120, 20);

Vlastnosti štetca

Štetec (Brush) sa používa najmä na vnútornú výplň geometrických útvarov. Najdôležitejšie vlastnosti štetca sú Color - farba a Style - štýl výplne. Existujú takéto štýly:

• bsSolid - úplná výplň, používa sa najčastejšie
• bsHorizontal - vodorovné čiary (šrafovanie)
• bsVertical - zvislé šrafovanie
• bsBDiagonal - šrafovanie naklonené doprava
• bsFDiagonal - šrafovanie naklonené doľava
• bsCross - mriežka
• bsDiagCross - naklonená mriežka
• bsClear - útvar bude bez výplne

Aby sme si mohli predviesť prácu so štetcom, naučíme sa kresliť obdĺžnik. Poslúži nám metóda Rectangle objektu typu TCanvas. Má štyri parametre - X1, Y1 (súradnice ľavého horného rohu), X2, Y2 (súradnice pravého dolného rohu).

with imgObraz.Canvas do begin
 Pen.Color := clLime;
 Pen.Width := 2;
 Brush.Color := clGray;
 Brush.Style := bsSolid;
 Rectangle(5, 5, 200, 100);
end;

V príklade sme použili sme kľúčové slovo with, aby sme v zdrojovom kóde nemuseli neustále vypisovať imgObraz.Canvas.XYZ.

Geometrické útvary

Okrem už spomínanej úsečky a obdĺžnika môžeme kresliť mnoho ďalších útvarov. Spomeniem aspoň niektoré z nich.

Jeden obrazový bod zapíšeme na plátno pomocou vlastnosti Pixels[X, Y] typu TColor. Prečítaním tejto vlastnosti zistíme, pixel akej farby sa nachádza na zadanej súradnici.

imgObraz.Canvas.Pixels[2, 1] := clYellow;
ShowMessage('Farba je '
 + ColorToString(imgObraz.Canvas.Pixels[2, 1]));

Predchádzajúci kód zafarbil pixel so súradnicami [X=2, Y=1] na žlto. Potom nám to dal aj najavo zobrazením hlášky o farbe.

Štvorec nemá žiadnu extra metódu - vytvoríme ho cez Rectangle, podobne ako obdĺžnik.

Elipsu a kruh kreslíme metódou Ellipse. Elipsa bude akoby vpísaná do pomyselného obdĺžnika, ktorý určujú parametre X1, Y1, X2, Y2.

Mnohouholník sa dá vytvoriť metódou Polygon. Tá má parameter typu array of TPoint. Typ TPoint je záznam s položkami X a Y. Najjednoduchšie ho vytvoríme funkciou Point(X, Y).

imgObraz.Canvas.Polygon(
[Point(50, 10), Point(10, 100), Point(100, 100)]
);

Uvedený príklad nakreslí trojuholník. Parameter sa nachádza v hranatých zátvorkách, pretože je to pole. Jeho jednotlivé položky sú potom oddelené čiarkami.

Z ďalších útvarov spomeniem ešte tieto: Arc (oblúk), Chord (tetiva), PolyBezier (Bezierova krivka), Frame3D (trojrozmerný obdĺžnik). Ich použitie si však vyžaduje podrobnejšie znalosti geometrie, preto sa nimi nebudem podrobnejšie zaoberať.

Text

Na grafickú plochu je možné i písať text. Slúži na to metóda TextOut(X, Y, Text). Typ písma určíme vlastnosťou Font.

imgObraz.Canvas.Font.Color := clFuchsia;
imgObraz.Canvas.TextOut(15, 20, 'Hurá!');

Bitmapy

Ukážeme si, ako jednoducho a efektne zobraziť bitmapu v komponente Image. Nevyužijeme pritom jej vlastnosť Canvas, ale Picture.

imgObraz.Picture.LoadFromFile('c:\obrazok.bmp');

Príklad na záver

Aplikáciu nazveme Farebné štvorce. Na náhodné pozície vykreslíme 1000 štvorcov náhodnej farby. Využijeme pri tom parameter funkcie Random, ktorý udáva maximálne možné vygenerované číslo.

procedure TfrmHlavny.FormShow(Sender: TObject);
var
 i, x, y: integer;
begin
 Randomize;
 for i := 1 to 1000 do begin
  // clWhite ma najvacsi kod farby ($7FFFFFFF)
  imgObraz.Canvas.Brush.Color := Random(clWhite);
  x := Random(imgObraz.Width);
  y := Random(imgObraz.Height);
  imgObraz.Canvas.Rectangle(x, y, x+20, y+20);
 end;
end;

Hoci zadanie znelo dosť fádne, výsledkom je takéto abstraktné umenie: