Kurz programovania pre študentov učiteľstva informatiky
Fakulta matematiky, fyziky a informatiky, Univerzita Komenského v Bratislave
Katedra základov a vyučovania informatiky, šk.r. 2011/12
2: Grafika
Naučíte sa:
používať grafické príkazy:
  • Rectangle,
  • Ellipse,
  • MoveTo,
  • LineTo,
  • Polygon
grafika
Grafické príkazy: Rectangle, Ellipse, MoveTo, LineTo, Polygon; Súradnice obrázku
Grafická plocha, na ktorú môžeme kresliť, sa nachádza na komponente Image1, ktorý už máme umiestnený vo formulári. Image1 je názov jedného konkrétneho objektu triedy TImage. Takých obrázkov by sme mohli mať na formulári aj viac (Image2, Image3, ...) ale zatiaľ nám postačí jeden. Obrázok Image1 má v sebe plátno Canvas, na ktoré sa pomocou príslušných príkazov môže kresliť alebo písať. Preto, ak sme chceli kresliť obdĺžnik, museli sme programu oznámiť, že sa bude kresliť na obrázok Image1 a na jeho Canvas.
  Image1.Canvas.Rectangle(10,100,150,200);
Grafická plocha má svoju výšku aj šírku. Tieto hodnoty sú uložené vo vlastnostiach Image1.Height (výška) a Image1.Width (šírka). Grafická plocha má súradnice, aby sme vedeli, kam vykresľovať. V ľavom hornom rohu je vždy bod [0,0]. X-ová aj Y-ová os sú kladné.

turbo delphi explorer

Príkaz Rectangle má 4 vstupné parametre, sú to celé čísla a označujú súradnice dvoch bodov. Prvé dve súradnice patria bodu v ľavom hornom rohu obdĺžnika a druhé dve čísla sú súradnice pravého dolného rohu obdĺžnika. Týmito dvoma bodmi je obdĺžnik jednoznačne určený.

Image1.Canvas.Rectangle(x1,y1,x2,y2);

turbo delphi explorer

Podobne funguje príkaz Ellipse, ktorý má rovnako 4 parametre, ktoré označujú ľavý horný a pravý dolný bod obdĺžnika, ktorý je elipse opísaný.

Image1.Canvas.Ellipse(x1,y1,x2,y2);

procedure TForm1.Button1Click(Sender: TObject);
begin
  Image1.Canvas.Ellipse(10,100,150,200);
end;

tlazarus

Ak chceme, aby sa elipsa vykreslila na bielom pozadí, musíme najskôr nakresliť biely obdĺžnik, ktorý pokryje celý obrázok a tak ho vlastne zmaže:
procedure TForm1.Button1Click(Sender: TObject);
begin
  Image1.Canvas.Rectangle(-1,-1,Image1.Width+1,Image1.Height+1);
  Image1.Canvas.Ellipse(10,100,150,200);
end;

tlazarus

Bude dobré, ak urobíme tlačidlo s názov "Zmaž", ktoré bude premazávať obrázok pomocou vykreslenia bieleho obdĺžnika. Toto tlačidlo bude užitočné aj pri ďalšom vykresľovaní. Nápis na tlačidle zmeníme v Inšpektore objektov, ak nastavíme položku "Caption" na "Zmaž". Rozmery obdĺžnika by mali byť na každej strane o 1 pixel väčšie než je obrázok - tým zabezpečíme, že nebude mať čierny okraj.
procedure TForm1.Button2Click(Sender: TObject);
begin
  Image1.Canvas.Rectangle(-1,-1,Image1.Width+1,Image1.Height+1);
end;

Ďalšie príkazy na kreslenie, ktoré budeme používať, sú MoveTo a LineTo. Pomocou MoveTo presúvame po grafickej ploche pomyselné pero do zadaného bodu, bez toho aby sme kreslili. Príkaz LineTo slúži na kreslenie rovnej čiary z aktuálneho bodu do zadaného bodu. Oba príkazy majú ako vstup súradnice jedného bodu (tj. dve celé čísla).
Image1.Canvas.MoveTo(x-ova_suradnica, y-ova_suradnica);
Image1.Canvas.LineTo(x-ova_suradnica, y-ova_suradnica);

Napíšeme program, ktorý po stlačení tlačidla Button1 nakreslí do grafickej plochy trojuholník pomocou príkazov MoveTo a LineTo.
procedure TForm1.Button1Click(Sender: TObject);
begin
  Image1.Canvas.MoveTo(100,100);
  Image1.Canvas.LineTo(50,150);
  Image1.Canvas.LineTo(150,150);
  Image1.Canvas.LineTo(100,100);
end;

turbo delphi explorer

Pre kreslenie ľubovoľných uzavretých čiar (polygónov) môžeme použiť príkaz Polygon. Ako vstup má množinu bodov, ktoré tvoria N-uholník.

Image1.Canvas.Polygon([Point(x1, y1), Point(x2, y2), Point(x3, y3), ...]);

Ten istý trojuholník, ktorý sme nakreslili pomocou LineTo teraz urobíme pomocou Polygon.
procedure TForm1.Button1Click(Sender: TObject);
begin
  Image1.Canvas.Polygon([Point(100,100),Point(50,150),Point(150,150)]);
end;
Všetky útvary (obdĺžnik, elipsa, polygón, čiara) sa kreslia do grafickej plochy akýmsi virtuálnym perom. Toto pero patrí plátnu grafickej plochy a má rôzne vlastnosti, ktoré sa dajú nastavovať a meniť:
  • farba pera: Image1.Canvas.Pen.Color
    - hodnoty, ktoré sa dajú priradiť sú typu TColor (farba), napríklad
    clRed, clBlue, clGreen, clYellow, clGray, clAqua, clWhite, clBlack, ...
    - pôvodne je farba pera nastavená na hodnotu clBlack
  • hrúbka pera: Image1.Canvas.Pen.Width
    - hodnota je vždy celé číslo, čím je väčšie, tým je čiara hrubšia, číslo znamená hrúbku čiary v pixeloch
    - pôvodná hodnota je 1
  • štýl: Image1.Canvas.Pen.Style
    - štýl udáva "vzhľad" čiary (či je čiarkovaná, bodkovaná, neprerušená a podobne)
    - hodnoty, ktoré sa priraďujú sú typu TPenStyle, napríklad
    psSolid, psDash, psDot, psDashDot, psDashDotDot, psClear
    - pôvodne je pero nastavené na psSolid
Napíšme program, ktorý nakreslí niekoľko obdĺžnikov s rôznou hrúbkou, farbou a štýlom pera.
procedure TForm1.Button1Click(Sender: TObject);
begin
  Image1.Canvas.Rectangle(100,100,200,150);

  Image1.Canvas.Pen.Color:=clRed;
  Image1.Canvas.Pen.Style:=psDash;
  Image1.Canvas.Rectangle(120,120,220,170);

  Image1.Canvas.Pen.Color:=clBlue;
  Image1.Canvas.Pen.Width:=3;
  Image1.Canvas.Pen.Style:=psSolid;
  Image1.Canvas.Rectangle(140,140,240,190);
end;
Po stlačení tlačidla Button1 sa na obrázku objavia 3 obdĺžniky.

turbo delphi explorer

Prvý obdĺžnik sa vykreslil s pôvodnými nastaveniami - čiernym perom, hrúbka je 1 a čiara je neprerušovaná. Druhý obdĺžnik je červeným perom, čiara je čiarkovaná, hrúbka ostala 1. Tretí obdĺžnik je nakreslený modrým perom a hrúbka bola nastavená na 3.
Všimnime si, že všetky nastavenia treba urobiť PRED vykreslením obdĺžnika.
Obdĺžniky sa navzájom prekrývajú. Ten, ktorý bol vykreslený ako posledný je navrchu a ostatné sú akoby pod ním. Vždy sa uplatňuje tento spôsob vykresľovania, preto je dobré dávať pozor aj na to, v akom poradí čo vykresľujeme.

Uzatvorené útvary (obdĺžnik, elipsa, polygón) majú aj výplň Brush, ktorej sa dá nastavovať farba a štýl:
  • farba výplne: Image1.Canvas.Brush.Color
    - hodnoty, ktoré sa dajú priradiť, sú typu TColor (farba), napríklad
    clRed, clBlue, clGreen, clYellow, clGray, clAqua, clWhite, clBlack, ...
    - pôvodne je farba výplne nastavená na hodnotu clWhite
  • štýl výplne: Image1.Canvas.Brush.Style
    - hodnoty, ktoré sa priraďujú sú typu TBrushStyle, napríklad
    bsSolid, bsClear, bsHorizontal, bsVertical, bsFDiagonal, bsBDiagonal, bsCross, bsDiagCross
    - pôvodne je výplň nastavená na bsSolid - zaujímavé je nastavenie bsClear, kedy je výplň priesvitná a vidno aj útvary alebo čiary pod výplňou - ostatné štýly výplne sú rôzne vzorky
Napíšme program, ktorý nakreslí vedľa seba niekoľko štvorcov s rôznymi obrysmi a výplňami.
procedure TForm1.Button1Click(Sender: TObject);
begin
  Image1.Canvas.Brush.Style:=bsDiagCross;
  Image1.Canvas.Brush.Color:=clBlack;
  Image1.Canvas.Rectangle(100,100,150,150);

  Image1.Canvas.Brush.Style:=bsSolid;
  Image1.Canvas.Brush.Color:=clYellow;
  Image1.Canvas.Pen.Color:=clRed;
  Image1.Canvas.Pen.Width:=3;
  Image1.Canvas.Rectangle(160,100,210,150);

  Image1.Canvas.Brush.Color:=clGreen;
  Image1.Canvas.Pen.Color:=clBlue;
  Image1.Canvas.Pen.Width:=5;
  Image1.Canvas.Rectangle(220,100,270,150);
end;

turbo delphi explorer

Opäť platí, že všetky nastavenia pre daný štvorec sme museli napísať ešte pred jeho vykreslením. Tieto nastavenia budú platiť pre všetky ďalšie útvary, pokým ich nezmeníte.

V nasledujúcom príklade majú všetky útvary rovnaké pero aj výplň.
procedure TForm1.Button1Click(Sender: TObject);
begin
  Image1.Canvas.Pen.Color:=clRed;
  Image1.Canvas.Pen.Width:=3;
  Image1.Canvas.Brush.Color:=clYellow;

  Image1.Canvas.Ellipse(160,100,210,150);
  Image1.Canvas.Rectangle(220,100,270,150);
  Image1.Canvas.MoveTo(290,150);
  Image1.Canvas.LineTo(290,50);
end;

turbo delphi explorer

kabatova, kubincova © 2011, hosted by KZVI FMFI UK