Praca s mysou -- jednoduche kreslenie

Jednoduché kreslenie

! Vytvorme jednoduchú aplikáciu grafický editor.

Začneme nový projekt File -- > New Application. Do formuláru položíme grafickú plochu (Image1) a urobíme skratku na jej Canvas.

procedure TForm1.Image1MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);
begin
g.Pixels[x,y]:=cBlack;
end;

! Vyskúšajte projekt.
Čo v ňom zmeniť, aby sa kreslili čiary?

Ako nekresliť, keď nie je stlačené ľavé tlačidlo myši?

Využijeme na to parameter Shift, ktorý je typu TShiftState:
platí: TShiftState = set of (ssShift, ssAlt, ssCtrl, ssLeft, ssRight, ssMiddle, ssDouble);
Takže sa najprv v procedúre spýtame, či je stlačené ľavé tlačidlo a až potom urobíme čiaru. Upravte procedúru:

procedure TForm1.Image1MouseMove(Sender:TObject; Shift:TShiftState; X,Y:Integer);
begin
if Shift=[ssLeft] then g.LineTo(x,y);
end;

Náš grafický editor sa ešte nespráva celkom tak, ako by sme chceli: nakreslí čiaru aj z miesta, kde bola myš pustená na nové miesto -- to by sme nechceli. Pri stlačení myši musíme najprv presunúť grafické pero na nové miesto -- t.j. použijeme udalosť -- OnMouseDown -- vo formulári vyznačme Image1, v Objektovom inšpektore záložku Events, riadok OnMouseDown a dvojlikom na ňu môžeme definovať procedúru:

procedure TForm1.Image1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState;
X, Y: Integer);
begin
g.MoveTo(X,Y);
end;

! Vyskúšajte projekt.

Dodefinujme projekt tak, že keď sa bude ťahať so stlačeným pravým tlačidlom, budú sa vykresľovať čiary náhodnej hrúbky a farby, čím vzniknú pekné efekty:
Do formulára položte tlačidlo, ktorým sa zotrie grafická plocha.

Nastavovanie hrúbky pera

Vybereme komponent TrackBar (z palety komponentov Win32), položme ho do formuláru, prispôsobme jeho veľkosť (posúvaním čiernych štvorčekov)

posuvná lišta -- pri posúvaní vznikne udalosť OnChange -- môžeme zistiť otestovaním stavovej premennej Position
pri zmene jeho polohy (udalosť OnChange) zmeníme hrúbku nášho pera
v Objektovom inšpektore si všimnime riadky Min, ktorý je nastavený na 0 a Max s hodnotou 10, 0 sa nehodí, preto opravme Min na 1

Môžeme naprogramovať udalosť OnChange -- nájdime ju v záložke Events, dvojkliknime a napíšme:

procedure TForm1.TrackBar1Change(Sender: TObject);
begin
g.Pen.Width:=TrackBar1.Position;
end;

Vypisovanie súradníc myši

Na formulár položme komponent Label -- sem budeme písať súradnice myši, ak sa jej kurzor bude pohybovať nad
grafickou plochou (tento výpis pridáme do Image1MouseMove):
napr. Label1.Caption:=IntToStr(x)+','+IntToStr(y);

Paleta farieb a vybraná farba

Paleta môže byť štandardný Color Dialog, ktorý nájdete v palete komponentov v záložke Dialogs:

Vybraná farba sa bude zobrazovať v maličkom image (Image2) -- položte ho na formulár. Kliknutím naň sa bude otvárať aj štandarný ColorDialog. Využijeme jeho metódu Execute a jeho vlastnosť Color. Naprogramujte teda udalosť onMouseDown na Image2:

procedure TForm1.Image2MouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
begin
ColorDialog1.Execute;
g.Pen.Color:=colorDialog1.Color;
farba.Brush.Color:=g.Pen.Color;
farba.FillRect(Image2.ClientRect);
end;

! Vyskúšajte program.

! Do programu doplňte zapisovanie a načítavanie obrázku, ktorý používateľ nakreslí. Využite dialógy na prácu so súbormi. Na samotný zápis využite metódy LoadFromFile a SaveToFile pre Image1.Picture.

Súbor vznikol na základe prednášok Andreja Blaha