Kreslení - třída Canvas

Podobně jako jsme vytvářeli jednoduchý textový editor, zkusíme v této lekci vytvořit ještě jednodušší editor, tentokrát grafický. Nejprve se ale musíme seznámit s třídou Canvas a jejími vlastnostmi, díky kterým budeme moci kreslit. V lekci použijeme jen některé z mnoha vlastností, pro podrobnější zkoumání doporučuji kurz V. Kadlece Umíme to s Delphi - lekci 16.

Třídu TCanvas (plátno) mohou využívat různé komponenty, například i formulář (můžeme kreslit na formulář), nebo komponenta PaintBox, kterou jsme ještě nepoužili. V následujícím projektu použijeme komponentu TImage, proto je v uvedených příkladech použita právě ona, ale tytéž vlastnosti lze použít, nahradíte-li například Image komponentou Form.

- Pen - pero pro kreslení, má vlastnosti například Color a width, barva se může zapsat také anglickým názvem, tloušťka je daná číslem typu integer (celým), konkrétní příkazy by mohly vypadat takto:
Image1.canvas.pen.color:=clred;
Image1.canvas.pen.width:=5;
V projektu pro určení barvy využijeme proměnnou typu TColor, určeného speciálně pro barvy.

- Brush - štětec (výplň), má také vlastnost Color a ještě například Style pro styl výplně, třeba různá šrafování (viz V. Kadlec).

Pro tvorbu grafických objektů lze využívat následující metody (příkazy) třídy Canvas (vybral jsem jen nejzákladnější):
MoveTo - přesune pero na zadanou souřadnici, nekreslí čáru (souřadnice [0,0] má levý horní roh):
Image1.Canvas.moveto(x,y);
LineTo - nakreslí úsečku z aktuální pozice pera na zadané souřadnice
Rectangle - nakreslí obdélník (čtverec) daný souřadnicemi levého horního a pravého dolního vrcholu, kreslí se daným perem a štětcem (výplní): Image1.Canvas.Rectangle(X - Rozmer, Y - Rozmer, X + Rozmer, Y + Rozmer);
Ellipse - kreslí elipsu (kružnici) definovanou zadaným čtyřúhelníkem (elipsa je do něj „uzavřena“)
TextOut(x, y, 'text'); - text v apostrofech vypíše od souřadnice (x, y) - písmo se dá nastavit pomocí vlastnosti Font (případně pomocí dialogu TFont)

Metod je ještě celá řada, ale už spíše pro experty - viz V. Kadlec.

Projekt Kreslení

Následující jednoduchý projekt nám umožní kreslení pomocí myši vybranou barvou a tloušťkou pera.

Hlavní částí projetku je oblast, do které lze kreslit, pro ni je využita komponenta TImage . Dále je z obrázku vidět, že projekt navíc obsahuje jen jedno tlačítko pro určení barvy čáry a spinedit pro tloušťku čáry. Pro výběr barvy jsem použil standardní dialog TColorDialog.

Použitých proměnných je také málo:
kresli: boolean;
barva: TColor;
tloustka: integer;
Proměnná kresli bude sledovat, zda se kreslí, proměnná barva je pro nás nového typu TColor.

Programování začneme u událostí komponenty Image, nejprve proceduru pro událost MouseDown, stisknutí levého tlačítka myši - zahájení kreslení:
procedure TForm2.Image1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
kresli:=true;
Image1.Canvas.moveto(x,y);
Image1.canvas.pen.color:=barva;
Image1.canvas.pen.width:=tloustka;
end;
Proměnná kresli se nastaví na true (začínáme kreslit), pero se přesune na souřadnice myši (jsou to parametry procedury, viz její hlavička), nastaví se barva a tloušťka pera (není-li vybraná, potom jsou předdefinované hodnoty černá a 1).

Vlastní kreslení potom provádí procedura pro událost MouseMove komponenty Image:
procedure TForm2.Image1MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);
begin
if kresli then Image1.canvas.lineto(x,y);
end;
Jestliže se kreslí (bylo předtím stisknuto levé tlačítko myši), potom nakresli čáru do nové souřadnice myši.

Poslední procedura pro události komponenty Image ošetří uvolnění levého tlačítka myši MouseUp - přestane se kreslit:
procedure TForm2.Image1MouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
kresli:=false;
end;

Další dvě procedury pro tlačítko a změnu spineditu nastaví barvu a tloušťku pera:
procedure TForm2.Button1Click(Sender: TObject);
begin
if ColorDialog1.Execute then barva := ColorDialog1.Color;
end;

procedure TForm2.SpinEdit1Change(Sender: TObject);
begin
tloustka:=spinedit1.Value;
end;

Poslední je inicializační procedura, která nakreslí bílý obdélník do celé plochy komponenty Image:
procedure TForm2.FormCreate(Sender: TObject);
begin
image1.Canvas.brush.Color := clwhite;
Brush.Style := bsSOlid; //plna vypln
image1.Canvas.brush.Color := clwhite;
image1.Canvas.Pen.Color:=clwhite;
image1.Canvas.Rectangle(0, 0, Image1.Width, Image1.Height);
end;