Delphi gyakorló feladatok

Futás idejű grafika használata I.

Megismerendő eszközök

Amikor a Delphi alkalmazásban grafikát készítünk, akkor az objektum canvas-ára (festővászon) rajzolunk és nem direkt az objektumra. A canvas az adott objektum tulajdonsága és maga is objektum, így rendelkezik tulajdonságokkal. A canvas négy legfontosabb tulajdonságága a következő: a toll (pen), mely vonalas rajzra szolgál, a festőecset (brush), melynek segítségével alakzatokat tölthetünk ki, a betűtípust (font) szöveg írására használható és a  pixelek tömbje, amely a képet reprezentálja.

Ebben a feladatban a toll, a festőecset és a pixel tömb alkalmazását ismerjük meg. Mivel a canvas-ok csak fut 333e47d ás időben érhetőek el, így kódot kell készítenünk, ha meg szeretnénk ismerni a Delphi következő grafikai elemeit:

a pixel tömb használata

vonalas rajz

alakzatok rajzolása

speciális részek rajzolása

A pixel tömb használata

Minden canvas rendelkezik egy Pixels-nek nevezett tulajdonsággal, amely a kép színes pontjainak tömbje. A pontok egyenként is színezhetőek, de a toll és a festőecset kényelmesebb módja lehet a képpontok csoportos használatának. A canvas pixel-ei egy kétdimenziós tömbben helyezkednek el. Minden elemnek meghatározott színe van. Az egyes pixeleket olvashatjuk, vagy beállíthatjuk

Pixel színének olvasása

Egy adott pixel színének olvasásához a canvas Pixels tulajdonságának x-, y- koordinátájú elemét kell beolvasni. A canvas koordinátarendszerének origója a bal felső sarokban helyezkedik el. A következő, kiválasztó box-hoz tartozó eseménykezelő például a box betűszínét változtatja meg:

procedure TForm1.CheckBox1Click(Sender: TObject);

begin

CheckBox1.Font.Color := Canvas.Pixels[10, 10];

end;

Pixel színezése

Az adott x-, y- koordinátájú pont színének beállításához szintén a Pixels tulajdonságot használjuk. Az alábbi eseménykezelő egy-egy pixel színét változtatja pirosra kattintás hatására.

procedure TForm1.Button1Click(Sender: TObject);

begin

Canvas.Pixels[Random(ClientWidth), Random(ClientHeight)] := clRed;

end;

A toll használata

A canvas Pen property-je vonalas rajz elkészítésére szolgál. A toll négy tulajdonsága állítható be: Color (szín), Width (szélesség), Style (stílus) és Mode (mód). Ezen tulajdonságok határozzák meg azt, hogy a toll miként fogja a vonalas rajzot elkészíteni. Az alapértelmezés szerinti toll fekete színű, egy pixel széles, tömör stílusú és a módja un. copy, amely azt jelenti, hogy felülír mindent, ami már a festővásznon (canvas) volt.

A szín (Color) tulajdonság hasonlóan szabályozható futás időben, mint más objektum esetében. A szélesség (Width) egész érték lehet. A stílus (Style) pl. tömör vonal, pont vonal, szaggatott vonal, stb. lehet. A mód tulajdonság (Mode) pedig azt állítja be miként kombinálódjon a toll színe azzal a színnel, amely a festővásznon már korábban elhelyezkedett.

A toll mozgatása

A toll aktuális rajzoló pozíciója, az a pont, amelyből kiindulva fogja a toll a következő vonalat húzni. Ezt a pontot a canvas PenPos tulajdonsága tárolja. Ez a tulajdonság csak a kirajzolandó vonalra van hatással, alakzat vagy szöveg adott pozícióban történő megjelenítéséhez nem használható, ott más paramétereket kell beállítani.

A rajzolási pozíció beállítására a festővászon MoveTo metódusát használjuk. Például a rajzolási pozíció bal felső sarokba való mozgatásához a következő kódot kell megírnunk:

Canvas.MoveTo(0, 0);

Megjegyzés: A LineTo metódus történő rajzolás az aktuális rajzolási pozíciót a megrajzolt vonal végére állítja.

Az ecset használata

A festővászon (canvas) Brush tulajdonsága határozza meg, hogy miként töltünk ki egy adott területet. A kitöltő eljárás nagy számú szomszédos pixel színét speciálisan változtatja meg. Az ecsetnek három tulajdonsága állítható be: Color (szín), Style (stílus), és a Bitmap, melyek meghatározzák az alakzat vagy a terület kitöltését. Alapértelmezésként az ecset színe fehér, tömör és nem mintázott a bitmap.

A szín (Color) tulajdonság hasonlóan szabályozható futás időben, mint más objektum esetében. A Style tulajdonság azt határozza meg, hogy az ecset színe milyen kölcsönhatásban legyen a festővászon eredeti színeivel. A Bitmap segítségével pedig kitöltési mintát állíthatunk be.

Szakaszok és poligonok rajzolása

Két fajta vonalas rajzot készíthetünk: szakaszokat, vagy poligonokat. Az egyenes szakasz kirajzolása során két pontot kötünk össze, a poligon pedig egymáshoz kötött egyenes szakaszok olyan füzére, melynek a kezdő és végpontja ugyanaz.

Szakaszok rajzolása

Szakaszok festővásznon történő megjelenítésére a canvas  LineTo metódusát használjuk. A LineTo egy egyenest húz az aktuális toll pozíciótól egy meghatározott pozícióba és a szakasz végpontjára változtatja meg az aktuális toll pozíciót. Például a következő eljárás átlós keresztet rajzol:

procedure TForm1.FormPaint(Sender: TObject);

begin

with Canvas do

begin

MoveTo(0, 0);

LineTo(ClientWidth, ClientHeight);

MoveTo(0, ClientHeight);

LineTo(ClientWidth, 0);

end;

end;

Az OnPaint esemény akkor történik, ha a Windows detektálja, hogy az adott form-ot újra kell rajzolni, például, ha egy másik, előtte elhelyezkedő ablakot bezárunk, mozgatunk. A  FormPaint az alapértelmezett neve a Delphi által generált OnPaint eseményhez tartozó eseménykezelőnek.

Poligonok kirajzolása

Egymáshoz kapcsolódó egyenes szakaszokat a canvas PolyLine metódusával rajzolhatunk. Az eljárásnak átadott paraméterek az egyes csúcspontok pozícióit tartalmazó tömb. A következő eljárás rombuszt rajzol:

procedure TForm1.FormPaint(Sender: TObject);

begin

with Canvas do

PolyLine([Point(0, 0), Point(50, 0), Point(75, 50), Point(25, 50), Point(0, 0)]);

end;

Megjegyzés: ez az eljárás a Delphi nyitott tömb lehetőségét is bemutatja. Tetszőleges számú tömbpontot átadhatunk paraméterként, ha a paramétereket szögletes zárójelbe helyezzük.

Alakzatok rajzolása

A canvas négy alakzattípust tud kirajzolni a metódusai segítségével. A canvas az alakzatok határát a toll segítségével húzza meg, a belsejüket pedig az ecsettel tölti ki. Az alakzat típusok a következők:

Téglalap és ellipszis

Lekerekített sarkú téglalap

Poligon által határolt terület

Téglalap és ellipszis rajzolása

Téglalap, vagy ellipszis kirajzolásához a canvas Rectangle illetve Ellipse metódusát hívhatjuk. Az átadandó paraméterek a határoló téglalap koordinátái. A Rectangle metódus kirajzolja a határoló téglalapot, míg az Ellipse olyan ellipszist rajzol, mely érinti a határoló téglalapot.

A példában egy form bal felső negyedét téglalappal festjük ki, majd ellipszist rajzolunk rá:

procedure TForm1.FormPaint(Sender: TObject);

begin

Canvas.Rectangle(0, 0, ClientWidth div 2, ClientHeight div 2);

Canvas.Ellipse(0, 0, ClientWidth div 2, ClientHeight div 2);

end;

Lekerekített sarkú téglalap rajzolása

Lekerekített sarkú téglalap rajzolása érdekében a canvas RoundRect metódusát alkalmazhatjuk. Az első négy paraméter a határoló téglalapot jelenti míg a további két paraméter a sarok lekerekítését határozza meg.

A következő eljárás lekerekített sarkú téglalapot rajzol, ahol a körívek átmérője 10 pixel:

procedure TForm1.FormPaint(Sender: TObject);

begin

Canvas.RoundRect(0, 0, ClientWidth div 2, ClientHeight div 2, 10, 10);

end;

Poligon rajzolása

Poligon rajzolása a canvas Polygon metódusával történik. A Polygon metódus a csúcspontok tömbparaméterét használja. A toll segítségével összeköti a pontokat (az utolsót az elsővel is), majd az ecset tulajdonságainak felhasználásával kitölti az alakzatot.

Egy derékszögű háromszög megrajzolását szemlélteti a következő eljárás:

procedure TForm1.FormPaint(Sender: TObject);

begin

Canvas.Polygon([Point(0, 0), Point(0, ClientHeight), Point(ClientWidth, ClientHeight)]);

end;

Speciális alakzatok rajzolása

A canvas további alakzatok kirajzolását is biztosítja pl. ívek, szeletek, stb. megjelenítését.