Práca s myšou


Udalosti MouseMove a MouseDown
Posuvná lišta - TrackBar
Výpis súradníc
Jadnoduchý grafický editor
Úlohy na riešenie


Udalosti MouseMove a MouseDown      Nahor

Vytvorme jednoduchý textový editor, ktorý umožňuje kresliť myšou vybranou farbou nastavenou hrúbkou pera.

Potrebujeme ale vedieť pracovať s udalosťami, ktoré sú spojemé s pohybom myši a jej tlačidlami. Medzi základné udalosti patria MouseMove, ktorá nastane pri pohybe a MouseDown, ktorá nastane pri súčasnom stlačení tlačidla myši.

Začneme nový projekt, do formulára položme grafickú plochu (Image1) a urobíme skratku na jej Canvas. Na záložke Events grafickej plochy Image1 kliknime na udalosť MouseMove a dopíšme telo procedúry: 
procedure TForm1.Image1MouseMove(Sender: TObject; 
		Shift: TShiftState; X, Y: Integer); 
begin 
   g.Pixels[x,y]:=clBlack; 
end;

Ako kresliť iba vtedy, ak 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 telo procedúry: 

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

Na grafickej ploche sa však nakreslí čiara aj z miesta, kde bolo pustené tlačidlo myši - to nechceme. Pri stlačení myši musíme najprv presunúť grafické pero (MoveTo) na nové miesto a až odtiaľ kresliť - t.j. použijeme udalosť OnMouseDown vo formulári vyznačme Image1, v Objektovom inšpektore záložku Events, riadok OnMouseDown a dvojklikom 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;

Dodefinujme projekt tak, aby sa pri ťahaní myši so stlačeným pravým tlačidlom vykresľovali čiary náhodnej hrúbky a farby, čím vzniknú pekné efekty: Do formulára vložte tlačidlo na zmazanie grafickej plochy.



Posuvná lišta - TrackBar      Nahor

Vybereme komponent posuvná lišta - TrackBar z palety komponentov , položme ho do formulára a prispôsobme jeho veľkosť. V Objektovom inšpektore si nastavme hodnoty Min a Max.

Pri jeho posúvaní vznikne udalosť OnChange - aktuálnu hodnotu na lište môžeme zistiť stavovou premennou Position. Naprogramujeme udalosť OnChange pre zmenu hrúbky pera: 


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




Výpis súradníc      Nahor

Vypisovanie súradníc myši:

Ak chceme vidieť aktuálne súradnice myši pri pohybe nad grafickou plochou, položme na formulár prázdny komponent Label. Nasleduj[ci výpis pridáme do Image1MouseMove: 


Label2.Caption:=IntToStr(x)+','+IntToStr(y);


Jadnoduchý grafický editor      Nahor

Už nám chýba len krok k vytvoreniu jednoduchého grafického editora, musíme vytvorť ešte paletu farieb a aktuálnu vybranú farbu. Môžu to byť ďalšie grafické plôšky.

Položme na formulár ďalšiu graf. plochu (Image2), programom v tele procedúry FormCreate nakreslime do nej napr. 8 farebných obdĺžnikov. Vybraná farba sa bude zobrazovať v maličkom image (Image3) - položte ho na formulár podľa obrázka. Doplňme do programu nakreslenie farebnej palety. Najskôr vložme skratky na dve nové graf. plochy (akt_farba a paleta). 
private
  g:TCanvas;
  akt_farba:TCanvas;
  paleta:TCanvas;

	......

procedure TForm1.FormCreate(Sender: TObject);
const p: array[0..7] of TColor = (clBlack, clRed, 
	 clGreen, clBlue, clYellow, clWhite, clGray,
	 clMaroon);
var   w,h,i,j:integer;
begin
  g:=Image1.Canvas;
  akt_farba:=Image2.Canvas;
  paleta:=Image3.Canvas;
  w:=Image3.Width div 2;
  h:=Image3.Height div 4;
  paleta.Brush.Style:=bsSolid;
  for i:=0 to 1 do
    for j:=0 to 3 do
      begin
        paleta.Brush.Color:=p[i*4+j];
        paleta.FillRect(Rect(i*w,j*h,(i+1)*w,(j+1)*h));
      end;
  akt_farba.Brush.Style:=bsSolid;
  akt_farba.Brush.Color:=g.Pen.Color;
  akt_farba.FillRect(Image2.ClientRect);
end;

Aby to fungovalo, budeme meniť farbu pera grafickej plochy podľa kliknutého miesta v palete - Event OnMouseDown:

procedure TForm1.Image3MouseDown(Sender: TObject; 
	Button: TMouseButton; Shift: TShiftState; 
	X, Y: Integer);
begin
  g.Pen.Color:=paleta.Pixels[x,y];
  akt_farba.Brush.Color:=g.Pen.Color;
  akt_farba.FillRect(Image2.ClientRect)
end;



Úlohy na riešenie      Nahor


1. Navrhnite jednoduchý projekt, ktorý dovolí hrať hru Chytaj. Na formulári sa objaví zelený kruh. Úlohou hráča je do 1 sekundy na tento kruh kliknúť - vtedy sa zvýši počítadlo chytených, inak sa zvýši počítadlo nechytených. Po kliknutí alebo po uplynutí skundy sa kruh objaví na inom mieste.

Timer Obsah Hry s farbami