Grafika a programban

1. Grafika a programban Készítette: Pető László

2. Bevezetés • Valójában nem a célobjektumra rajzolunk, hanem annak festővászon területére (canvas). • Csak olyan objektumra tudunk rajzolni, amelynek van canvas tulajdonsága. • A canvas is egy objektum saját tulajdonságokkal és eljárásokkal.

3. Canvas • A Canvas objektum legfontosabb tulajdonságai: • Pen: (toll) vonalrajzoláshoz • Brush: (ecset) alakzatok kitöltésére • Font: (betűtípus) szöveg írásához • Pixels: (képponttömb) ez tartalmazza magát a képet. • A Canvas csak futás közben érhető el, ezért grafikus programokhoz, mindenképp kódot kell írni.

4. Célok • A toll, az ecset és a képponttömb használata. • Egyszerű grafikai alkalmazás készítése, amely képes: • Rajzolásra egér segítségével • Eszköztára van • A toll és ecset beállítására • Állapotsort használ • Bittérképes grafika módosítására. • Nyomtatásra • Vágólapkezelésre

5. A képponttömb kezelése • Minden canvas rendelkezik egy pixels tömbbel, amely a canvas pontjainak a színét tartalmazza. • A pontok egyenként is színezhetők, de ehhez célszerűbb a pen és a brush használata. • A canvas (0,0) pontja a bal felső sarok. Az első szám az ettől vízszintesen, a második az ettől függőlegesen mért távolságot jelenti pixelben.

6. A képponttömb használata • Az (x,y) pont színének lekérdezése: • valtozo:=canvas.pixels[x,y]; • Az (x,y) pont színének beállítása: • canvas.pixels[x,y]:=szinkod; • A színkódokkal már foglalkoztunk. • Clred, clblue, clwhite, stb. RGB függvény.

7. 1. program • Készítsünk programot, amely kirajzol egy téglalapot a (20, 20) és (320, 120) pontok által meghatározott átlók közé zöld színnel. • A téglalapon kívüli terület fehér legyen. • Ha az ablakra kattintunk, írja ki a program annak a képpontnak a színét, amelyre kattintottunk.

9. procedure TForm1.Sznez1Click(Sender: TObject); • var i,j:integer; • begin • for i:=0 to clientwidth do • for j:=0 to clientheight do • if (i>=20) and (i<=320) and (j>=20) and (j<=120) then • canvas.Pixels[i,j]:=clgreen else canvas.Pixels[i,j]:=clwhite; • end;

10. procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton; • Shift: TShiftState; X, Y: Integer); • begin • if canvas.Pixels[x,y]=clgreen then • showmessage('A képpont színe zöld') else • showmessage('A képpont színe fehér'); • end;

11. A toll használata • A Canvas Pen tulajdonságával lehet rajzolni • Jellemzői: • Color: Szín • Width: Vonalvastagság • Style: Vonaltípus. (folytonos, pontozott, szaggatott, stb.) • Mode: Felülírás módja. Hogyan kombinálódjon a szín a már meglévőkkel.

12. A toll • Alapértelmezés szerint a toll fekete színű, egy pixel vastagságú folytonos vonalat rajzol, a felülírási mód pmCopy, tehát felülír mindent. • A toll aktuális pozícióját a Canvas penpos tulajdonsága tárolja.

13. MoveTo, LineTo • MoveTo(x,y) : a toll pozíciója az x,y koordinátájú pont lesz rajzolás nélkül. • LineTo(x,y) : a toll az aktuális pozíciótól az x,y koordinátájú pontig vonalat rajzol. A rajzolás végén az x,y lesz a toll pozíciója.

14. 2. program • Készítsünk olyan programot, amely bekéri a kezdőpont és a végpont koordinátáit, majd közöttük vonalat rajzol!

16. procedure TForm1.Button1Click(Sender: TObject); • var kx,ky,vx,vy:integer; • begin • kx:=strtoint(edit1.text); • ky:=strtoint(edit2.text); • vx:=strtoint(edit3.text); • vy:=strtoint(edit4.text); • canvas.MoveTo(kx,ky); • canvas.LineTo(vx,vy); • end;

17. Az ecset (brush) • Nagyobb területek kitöltésének a módját határozza meg. • Tulajdonságai: • Color : Szín • Style : az ecset milyen kitöltőmintát használjon, milyen kölcsönhatásban az eredeti színekkel. • Bitmap : egy 8X8-as képet lehet megadni, amit kitöltőmintaként használhatunk.

18. Az ecset (brush) • Alapértelmezésként az ecset színe fehér, a terület minden pontját egyformán színezi, nem használ képet kitöltőmintaként.

19. Speciális sokszögek rajzolása • Ötféle síkidomot rajzolhatunk: • Téglalapot • Ellipszist • Lekerekített sarkú téglalapot • Sokszöget • egyéb speciális alakzatokat

20. Téglalap rajzolása • Rectangle(X1,Y1,X2,Y2); • X1,Y1 : az átló kezdőpontjának koordinátái • X2,Y2 : az átló végpontjának koordinátái

21. Ellipszis rajzolása • Ellipse(X1,Y1,X2,Y2); • X1,Y1 : az ellipszist érintő téglalap átlójának kezdőpontja • X2,Y2 : az ellipszist érintő téglalap átlójának végpontja

22. 3. program • Készítsünk programot, amely a megfelelő paraméterek bejuttatása után téglalapot, vagy ellipszist rajzol!

24. procedure TForm1.Button1Click(Sender: TObject); • var kx,ky,vx,vy:integer; • begin • kx:=strtoint(edit1.text); • ky:=strtoint(edit2.text); • vx:=strtoint(edit3.text); • vy:=strtoint(edit4.text); • canvas.Rectangle(kx,ky,vx,vy); • end;

25. procedure TForm1.Button2Click(Sender: TObject); • var kx,ky,vx,vy:integer; • begin • kx:=strtoint(edit1.text); • ky:=strtoint(edit2.text); • vx:=strtoint(edit3.text); • vy:=strtoint(edit4.text); • canvas.Ellipse(kx,ky,vx,vy); • end;

26. Lekerekített téglalap • RoundRect(x1,y1,x2,y2,a,b); • x1,y1 : az átló kezdőpontja • x2,y2 : az átló végpontja • a,b : a lekerekítéshez használt ellipszis kis és nagytengelye

27. Sokszögek rajzolása • Polygon([point(x1,y1),point(x2,y2),…,point(xn,yn)]); • xi,yi : a sokszög csúcspontja

28. Speciális alakzatok • A canvas objektum további alakzatok rajzolására is tartalmaz metódusokat: • körív • körszelet • stb.

29. Az egérhez kapcsolódó események • Négy alapvető eseményt különböztetünk meg: • az egérgomb lenyomása (onMouseDown) • az egérgomb felengedése (onMouseUp) • az egér mozgatása (onMouseMove) • kattintás (onClick)

30. onMouseDown, onMouseUp, onMouseMove • Paraméterek: • Sender : Az eseményt észlelő objektum • Button : a lenyomott egérgomb: mbLeft, mbMiddle, mbRight • Shift: az esemény pillanatában lenyomva tartott váltóbillentyűk : ALT, CTRL, SHIFT • X, Y : az egérmutató pozíciója az esemény bekövetkeztekor.

31. 4. program • Készítsünk programot, amely kattintásra kiírja az egérmutató pozícióját!

33. procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton; • Shift: TShiftState; X, Y: Integer); • begin • canvas.TextOut(x,y,inttostr(x)+', '+inttostr(y)); • end;

34. 5. program • Készítsünk programot, amely az egérkurzor lenyomásának pozíciójától az egérgomb felengedésének pozíciójáig rajzol egy szakaszt!

36. procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton; • Shift: TShiftState; X, Y: Integer); • begin • canvas.MoveTo(x,y); • end;

37. procedure TForm1.FormMouseUp(Sender: TObject; Button: TMouseButton; • Shift: TShiftState; X, Y: Integer); • begin • canvas.LineTo(x,y); • end;

38. !!!!! • A vonal sajnos csak az egérgomb felengedésekor válik láthatóvá. • Javítsuk a hibát!

39. 6. program • Javítsuk ki úgy a programot, hogy a mozgatás közben is lehessen látni az egér mozgását!

41. procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X, • Y: Integer); • begin • canvas.LineTo(x,y); • end;

42. !!!!! • A programmal szabadkézi rajz készíthető, de akkor is rajzol, ha az egérgomb nincs lenyomva. • A gomb lenyomásának vizsgálatához vegyünk fel egy rajzolhat logikai változót. • A programnak csak akkor kéne rajzolnia, ha ez igaz értéket tartalmaz.

43. 7. program • Javítsuk ki az előbbi programot úgy, hogy csak lenyomott gomb esetén rajzoljon!

45. public • { Public declarations } • rajzolhat:boolean; • end;

46. procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton; • Shift: TShiftState; X, Y: Integer); • begin • rajzolhat:=true; • canvas.MoveTo(x,y); • end;

47. procedure TForm1.FormMouseUp(Sender: TObject; Button: TMouseButton; • Shift: TShiftState; X, Y: Integer); • begin • canvas.LineTo(x,y); • rajzolhat:=false; • end;

48. procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X, • Y: Integer); • begin • if rajzolhat then canvas.LineTo(x,y); • end;

49. !!!!! • A program szabadkézi rajzhoz már jó. • Ha azonban vonalzót szeretnénk, akkor az a probléma, hogy a LineTo metódus mindig megváltoztatja a toll pozícióját. • A kezdeti állapotot tehát meg kell különböztetni a közbenső állapotoktól. • Vegyünk fel egy kezdx és egy kezdy egész típusú változót!

50. 8. program • Készítsünk programot, amely az egér lenyomott gombjával nem szabadkézi rajzot, hanem szakaszt rajzol a lenyomási és a fölengedési pozíció között!