Grafika a programban Készítette: Pető László. Bevezetés Valójában nem a célobjektumra rajzolunk, hanem annak festővászon területére (canvas). Csak olyan.

Az előadások a következő témára: "Grafika a programban Készítette: Pető László. Bevezetés Valójában nem a célobjektumra rajzolunk, hanem annak festővászon területére (canvas). Csak olyan."— Előadás másolata:

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.

8

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 =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!

15

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!

23

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!

32

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!

35

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!

40

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!

44

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!

51

52 public { Public declarations } rajzolhat:boolean; kezdx,kezdy:integer; end;

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

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

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

56 !!!!! A vonal elkészül, de sajnos a közbenső vonalak is ott maradnak. (Persze effektnek nem is olyan rosszak! :)) A korábbi szakaszt mindig törölni kéne. Ehhez a korábbi szakasz végpontját is el kéne tárolni vegx, vegy egész változókban.

57 9. program Készítsünk olyan programot, ahol csak a lenyomási pozíció és a felengedési pozíció között jelenik meg vonal!

58

59 public { Public declarations } rajzolhat:boolean; kezdx,kezdy:integer; vegx,vegy:integer; end;

60 procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin rajzolhat:=true; canvas.MoveTo(x,y); kezdx:=x; kezdy:=y; vegx:=x; vegy:=y; end;

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

62 procedure TForm1.FormMouseMove(Sende r: TObject; Shift: TShiftState; X, Y: Integer); begin if rajzolhat then begin //a régi szakasz törlése canvas.Pen.Mode:=pmNotXor; canvas.MoveTo(kezdx,kezdy); canvas.LineTo(vegx,vegy); //az új szakasz canvas.MoveTo(kezdx,kezdy); canvas.LineTo(x,y); end; vegx:=x; vegy:=y; canvas.pen.Mode:=pmCopy; end;

63 !!!!! A pmNotXor állapotú toll törli azokat a képpontokat amelyek nem háttérszínűek, és tollszínűvé teszi őket, ha háttérszínűek voltak. A pmCopy állapotú toll mindig rajzol. (Ez az alapértelmezett toll állapot) Szabadkézi rajzon és vonalzón kívül ellipszist és téglalapot is szeretnénk rajzolni. Ennek az eldöntéséhez eszköztárra van szükség.

64 Eszköztár a programban Az eszköztár olyan panel, amely gyorsítógombokat tartalmaz. A gyorsítógombok olyan parancsgombok, amelyekben a felirat helyett többnyire egy kis kép látható. Készítsünk 30X30-as bitképeket a gyorsítógombokra! (szabadkézi rajz, vonalzó, téglalap, ellipszis; toll, ecset)

65

66 Elkészítés Helyezzünk a főablakra egy Panel komponenst! Töröljük a Caption tulajdonság értékét! Igazítsuk az ablak tetejére! (align=alTop) A panel magassága 32 képpont legyen! (height=32) Helyezzünk gyorsítógombokat a panelre! 4- 2-es csoportosításban!

67 Elkészítés A gyorsítógombok szélessége és magassága a bitképeknek megfelelően 30 képpont legyen! A top értéket állítsuk 1-re, így a gomb a panelnak pont a közepére fog kerülni. Állítsuk be a gombokon látható képeket a megfelelő bitképek segítségével! (glyph)

68 Csoportokba szervezés A csoportokon belül, ha egy gomb be van kapcsolva, akkor ugyanebben a csoportban másik ne lehessen ugyanilyen állapotban. Az első négy gomb groupindex tulajdonsága legyen 1, a tollé 2, az ecseté 3! A tollnak és az ecsetnek kikapcsolhatónak is kell lennie allowallup=true

69 Kezdeti beállítások A gombok kezdeti állapota a Down tulajdonsággal szabályozható. Ha ez true, akkor a gomb be van kapcsolva, ha false, akkor ki van kapcsolva. A szabadkézi rajz gombja legyen alapértelmezett állapotban lenyomva!

70 Különböző rajzeszközök használata A programnak mindig tudnia kell, hogy a felhasználó melyik eszközt választotta. Ehhez vezessünk be egy rajzeszk egész változót, amelynek 1 az értéke szabadkézi rajz esetén, 2 vonal, 3 téglalap, 4 ellipszis esetén!

71 public { Public declarations } rajzolhat:boolean; kezdx,kezdy:integer; vegx,vegy:integer; rajzeszk:integer; end;

72 procedure TForm1.SpeedButton1Click(Sender: TObject); begin rajzeszk:=1; end;

73 procedure TForm1.SpeedButton2Click(Sender: TObject); begin rajzeszk:=2; end;

74 procedure TForm1.SpeedButton3Click(Sender: TObject); begin rajzeszk:=3; end;

75 procedure TForm1.SpeedButton4Click(Sender: TObject); begin rajzeszk:=4; end;

76 procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin rajzolhat:=true; canvas.MoveTo(x,y); kezdx:=x; kezdy:=y; vegx:=x; vegy:=y; end;

77 1 procedure TForm1.FormMouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin case rajzeszk of 1:begin canvas.LineTo(x,y); rajzolhat:=false; end;

78 2 2:begin canvas.MoveTo(kezdx,kezdy); canvas.LineTo(x,y); rajzolhat:=false; end; 3:begin canvas.MoveTo(kezdx,kezdy); canvas.rectangle(kezdx,kezdy,x,y); rajzolhat:=false; end;

79 3 4:begin canvas.MoveTo(kezdx,kezdy); canvas.ellipse(kezdx,kezdy,x,y); rajzolhat:=false; end;

80 1 procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer); begin case rajzeszk of 1:begin if rajzolhat then canvas.LineTo(x,y); end;

81 2 2:begin if rajzolhat then begin //a régi szakasz törlése canvas.Pen.Mode:=pmNotXor; canvas.MoveTo(kezdx,kezdy); canvas.LineTo(vegx,vegy); //az új szakasz canvas.MoveTo(kezdx,kezdy); canvas.LineTo(x,y); end;

82 3 vegx:=x; vegy:=y; canvas.pen.Mode:=pmCopy; end;

83 4 3:begin if rajzolhat then begin //a régi téglalap törlése canvas.Pen.Mode:=pmNotXor; canvas.MoveTo(kezdx,kezdy); canvas.rectangle(kezdx,kezdy,vegx,vegy); //az új téglalap canvas.MoveTo(kezdx,kezdy); canvas.rectangle(kezdx,kezdy,x,y); end;

84 5 vegx:=x; vegy:=y; canvas.pen.Mode:=pmCopy; end;

85 6 4:begin if rajzolhat then begin //a régi ellipszis törlése canvas.Pen.Mode:=pmNotXor; canvas.MoveTo(kezdx,kezdy); canvas.ellipse(kezdx,kezdy,vegx,vegy); //az új ellipszis canvas.MoveTo(kezdx,kezdy); canvas.ellipse(kezdx,kezdy,x,y); end;

86 7 vegx:=x; vegy:=y; canvas.pen.Mode:=pmCopy; end;

87 !!!!! Az indításkor hiába van lenyomva a szabadkézi rajz gombja, a program nem rajzol. Javítsuk ki! A rajzeszk kezdeti értéke 1 legyen!

88 procedure TForm1.FormCreate(Sender: TObject); begin rajzeszk:=1; end;

89 A toll és az ecset beállításai Rejtett eszköztár létrehozása Az eszköztár ki- és bekapcsolása A toll stílusának módosítása A toll színének módosítása A toll vastagságának módosítása Az ecset stílusának módosítása Az ecset színének módosítása

90 Rejtett eszköztár létrehozása Hozzuk létre a TollEszkoztar és EcsetEszkoztar nevű eszköztárakat. Mindegyikhez egy-egy panelt használjunk!

91

92 Toll eszköztár Gyorsítógombok (groupindex=4, a legfölsőnél down=true) Label (ez fogja mutatni az aktuális vonalvastagságot) ColorGrid (ennek a méreteit a height, és width tulajdonsággal szabályozhatjuk; GridOrdering=go2x8; BackgroundEnabled=false) Scrollbar (a vonalvastagság szabályozásához, min=1; max=40)

93 Ecset eszköztár Gyorsítógombok (groupindex=5, a legfölsőnél down=true) ColorGrid (ennek a méreteit a height, és width tulajdonsággal szabályozhatjuk; GridOrdering=go2x8; BackgroundEnabled=false)

94 Az eszköztárak elrejtése A toll és ecset eszköztáraknak induláskor kikapcsolt állapotban kell lennie. (A komponensek visible tulajdonságát false-ra kell állítani!) A ki- és bekapcsolás a fő eszköztár megfelelő gombjával történik majd, ezeknek meg kell írni az onclick eljárását.

95 procedure TForm1.SpeedButton5Click(Sender: TObject); begin tolleszkoztar.Visible:=speedbutton5.Down; end; procedure TForm1.SpeedButton6Click(Sender: TObject); begin ecseteszkoztar.Visible:=speedbutton6.Down; end;

96 A toll szabályozása A vonalstílus beállításához hozzunk létre egy saját eljárást Vonalstilus néven. Ne felejtsük el külön deklarálni a program eljárásai között!!! A végén az eljárást minden vonalstílust módosító gombhoz rendeljük hozzá! (onClick)

97 procedure TForm1.Vonalstilus(Sender: TObject); begin if Sender=speedbutton7 then canvas.pen.style:=psSolid else if Sender=speedbutton8 then canvas.pen.style:= psDash //szaggatott else if Sender=speedbutton9 then canvas.pen.style:=psDot //pontozott else if Sender=speedbutton10 then canvas.pen.style:= psDashDot else if Sender=speedbutton11 then canvas.pen.style:= psDashDotDot else if Sender=speedbutton12 then canvas.pen.style:= psClear;//törlő end;

98 A toll színének beállítása procedure TForm1.ColorGrid1Click(Sender: TObject); begin canvas.pen.Color:= colorgrid1.ForegroundColor; end;

99 A vonalvastagság beállítása procedure TForm1.ScrollBar1Change(Sender: TObject); begin canvas.pen.Width:=scrollbar1.Position; label1.Caption:= inttostr(scrollbar1.position); end; Megjegyzés: A vonalstílus csak 1-es vonalméret esetén használható

100 Az ecset szabályozása Az ecset beállításához hozzunk létre egy saját eljárást Ecsetstilus néven. Ne felejtsük el külön deklarálni a program eljárásai között!!! A végén minden ecsetbeállító gomb onclick eljárásához ezt az eljárást rendeljük hozzá

101 procedure TForm1.Ecsetstilus(Sender: TObject); begin if sender=speedbutton13 then canvas.Brush.Style:=bssolid else if sender=speedbutton14 then canvas.Brush.Style:=bsclear else if sender=speedbutton15 then canvas.Brush.Style:=bshorizontal else if sender=speedbutton16 then canvas.Brush.Style:=bsvertical else if sender=speedbutton17 then canvas.Brush.Style:=bsfdiagonal else if sender=speedbutton18 then canvas.Brush.Style:=bsbdiagonal else if sender=speedbutton19 then canvas.Brush.Style:=bscross else if sender=speedbutton20 then canvas.Brush.Style:=bsdiagcross; end;

102 Az ecset színe procedure TForm1.ColorGrid2Click(Sender: TObject); begin canvas.Brush.Color:= colorgrid2.ForegroundColor; end;

103 Állapotsor készítése Helyezzünk egy Panel komponenst az ablakra, nevezzük allapotsor-nak. Align tulajdonságát állítsuk alBottom-ra A Caption tulajdonságát töröljük!

104 Állapotsor Helyezzünk két további panelt az állapotsorra (Kezdopoz, Aktualispoz) Az egyiket igazítsuk balra, a másikat a maradék területhez (alClient) A bevelinner és borderwidth tulajdonságok állításával 3D effektusokat állíthatunk

105 procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin rajzolhat:=true; canvas.MoveTo(x,y); kezdx:=x; kezdy:=y; vegx:=x; vegy:=y; kezdopoz.caption:='Kezdőpont: '+inttostr(x)+', '+inttostr(y); end;

106 procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer); begin case rajzeszk of 1:begin if rajzolhat then canvas.LineTo(x,y); end;

107 2:begin if rajzolhat then begin //a régi szakasz törlése canvas.Pen.Mode:=pmNotXor; canvas.MoveTo(kezdx,kezdy); canvas.LineTo(vegx,vegy); //az új szakasz canvas.MoveTo(kezdx,kezdy); canvas.LineTo(x,y); end; vegx:=x; vegy:=y; canvas.pen.Mode:=pmCopy; end;

108 3:begin if rajzolhat then begin //a régi téglalap törlése canvas.Pen.Mode:=pmNotXor; canvas.MoveTo(kezdx,kezdy); canvas.rectangle(kezdx,kezdy,vegx,vegy); //az új téglalap canvas.MoveTo(kezdx,kezdy); canvas.rectangle(kezdx,kezdy,x,y); end; vegx:=x; vegy:=y; canvas.pen.Mode:=pmCopy; end;

109 4:begin if rajzolhat then begin //a régi ellipszis törlése canvas.Pen.Mode:=pmNotXor; canvas.MoveTo(kezdx,kezdy); canvas.ellipse(kezdx,kezdy,vegx,vegy); //az új ellipszis canvas.MoveTo(kezdx,kezdy); canvas.ellipse(kezdx,kezdy,x,y); end; vegx:=x; vegy:=y; canvas.pen.Mode:=pmCopy; end;

110 aktualispoz.caption:='Helyzet: '+inttostr(x)+', '+inttostr(y); end;

111 Bittérkép Sajnos a programunk még nem tökéletes Ha átméretezzük az ablakot a rajz egy része eltűnik. Ha bittérképet használunk, akkor ez a probléma megoldható. Ha kiegészítjük gördítősávval, akkor a kép mérete is tetszőleges lehet.

112 Bittérkép Helyezzünk el egy Scrollbox komponenst a még üres területen, az align tulajdonsága legyen alClient. Helyezzünk el benne egy image komponenst. (Name=rajzimage, autosize=true, left=0, top=0)

113 A bittérkép kezdeti értékei Amikor egy image komponenst felrakunk, az még képet nem tartalmaz. Ha fix képet tartalmaz, az a Picture tulajdonság beállításával valósítható meg. Ha menet közben változik, akkor létre kell hozni egy bitmap objektumot, amit a Picture.Graphic tulajdonsághoz rendelünk hozzá.

114 procedure TForm1.FormCreate(Sender: TObject); var Bitmap:TBitmap;//változó a bitkép tárolására begin rajzeszk:=1; Bitmap:=TBitmap.Create;//létrehozás Bitmap.Width:=200; Bitmap.Height:=200;//kezdeti érték rajzimage.Picture.Graphic:=Bitmap;//hozzárendelés end;

115 Megjegyzés A program már megfelelő alkatrászekkel rendelkezik, de még mindig az ablakra és nem a bittérképre rajzol. A Search menü Replace… parancsával cseréljük ki a Canvas karaktersorozat minden előfordulását rajzimage.canvas-ra A rajzimage onmousedown, onmousemove, onmouseup eljárásához rendeljük a Form1 megfelelő eljárását, majd a Form1 eljárásai közül ezeket távolítsuk el!

116 A menürendszer Fájl –Új –Megnyitás… –Mentés –Mentés másként… – Nyomtatás –- –Kilépés

117 A menürendszer Szerkesztés –Kivágás –Másolás –Beillesztés

118 procedure TForm1.Kilps1Click(Sender: TObject); begin close; end;

119 Probléma A menük használatakor fölösleges vonalak jelenhetnek meg. A menü felengedése is rajzolási parancsot eredményezhet a programnak, ezt ki kell küszöbölnünk.

120 procedure TForm1.FormMouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin if rajzolhat then begin case rajzeszk of 1:begin rajzimage.canvas.LineTo(x,y); rajzolhat:=false; end; 2:begin rajzimage.canvas.MoveTo(kezdx,kezdy); rajzimage.canvas.LineTo(x,y); rajzolhat:=false; end;

121 3:begin rajzimage.canvas.MoveTo(kezdx,kezdy); rajzimage.canvas.rectangle(kezdx,kezdy,x,y); rajzolhat:=false; end; 4:begin rajzimage.canvas.MoveTo(kezdx,kezdy); rajzimage.canvas.ellipse(kezdx,kezdy,x,y); rajzolhat:=false; end;

122 A rajz kinyomtatása A nyomtatáshoz használnunk kell a Printers unitot, ezért tüntessük föl az ablak uses sorában! Ebben a unitban van a Printer objektum, aminek szintén van Canvas tulajdonsága, ez reprezentálja a kinyomtatandó lapot. A nyomtatáshoz a képet erre a canvasra kell másolni.

123 procedure TForm1.Nyomtats1Click(Sender: TObject); begin printer.BeginDoc;//a nyomtatás kezdete printer.Canvas.Draw(0,0,rajzimage.Picture. Graphic);//átmásolás printer.EndDoc;//a nyomtatás vége end;

124 Grafikus állományok kezelése A képek kezelésével kapcsolatban a következő műveletekre lesz szükség: –kép betöltése fájlból –az aktuális kép fájlba mentése –az aktuális kép helyettesítése másik képpel

125 Grafikus állományok kezelése Helyezzünk el egy OpenDialog és egy SaveDialog komponenst az ablakra Állítsuk be a filters tulajdonságukat úgy, hogy a BMP kiterjesztésű állományokat jelenítsék meg A Form1 public részében vegyünk fel egy AktualisFajl nevű string típusú változót, ami az aktuális kép nevét tartalmazza majd

126 Képállomány betöltése procedure TForm1.Megnyits1Click(Sender: TObject); begin if opendialog1.Execute then begin aktualisfajl:=opendialog1.FileName; rajzimage.Picture.LoadFromFile(aktualisfajl); end;

127 Kép fájlba mentése procedure TForm1.Mentsmsknt1Click(Sender: TObject); begin if savedialog1.Execute then begin aktualisfajl:=savedialog1.FileName; rajzimage.Picture.SaveToFile(aktualisfajl); end;

128 Kép mentése procedure TForm1.M1Click(Sender: TObject); begin if aktualisfajl<>'' then rajzimage.Picture.SaveToFile(aktualisfajl) else Mentsmsknt1Click(Sender); end;

129 Kép helyettesítése másik képpel Ha új képet szeretnénk létrehozni, akkor biztosítanunk kell azt, hogy a kép méreteit beállíthassuk. Ehhez hozzunk létre egy új ablakot! A form neve legyen kepmeretform Mentésnél a unitnak adjuk majd a kepmeret nevet.

130

131 procedure TForm1.j1Click(Sender: TObject); var Bitmap:TBitmap; begin kepmeretform.ActiveControl:=kepmeretform.edit1; //inputfókusz beállítása if kepmeretform.ShowModal<>idCancel then begin bitmap:=TBitmap.Create; bitmap.Width:=kepmeretform.UpDown1.Position; bitmap.Height:=kepmeretform.UpDown2.Position; rajzimage.Picture.Graphic:=bitmap; aktualisfajl:=''; end;

132 A vágólap használata A Windows vágólapja a Clipboard objektumon keresztül érhető el. A főablak uses sorában ehhez fel kell tüntetnünk a ClipBrd unitot.

133 A kép vágólapra másolása procedure TForm1.Msols1Click(Sender: TObject); begin clipboard.Assign(rajzimage.picture); end;

134 A kép kivágása Hasonló a másoláshoz A végén viszont törölni kell a rajzot a rajzolási területről. A rajzterület fehérre festésével.

135 procedure TForm1.Kivgs1Click(Sender: TObject); var rajzterulet:TRect; //a rajz adatainak tárolásához begin msols1Click(Sender); //másolás rajzimage.Canvas.CopyMode:=cmwhiteness; //minden //fehér rajzterulet:=Rect(0,0,rajzimage.width,rajzimage.height); rajzimage.Canvas.CopyRect(rajzterulet,rajzimage.canvas, rajzterulet); //saját magára másolás rajzimage.Canvas.CopyMode:=cmsrccopy; //az eredeti //mód end;

136 A kép beillesztése Meg kell vizsgálni, hogy a vágólapon bittérképes grafika van-e? Erre szolgál a Clipboard objektum HasFormat metódusa. Ez igaz értékkel tér vissza, ha a formátum a paraméterben megadottal megegyezik.

137 procedure TForm1.Beilleszts1Click(Sender: TObject); var bitmap:tbitmap; begin if clipboard.HasFormat(cf_bitmap) then begin bitmap:=tbitmap.create; try // ha rendszerhiba történik ez a rész kimarad bitmap.Assign(clipboard); rajzimage.Canvas.Draw(0,0,bitmap); finally // ez mindenképp lefut bitmap.Free; // memória felszabadítás end;

138 A program elkészült! VÉGE Készítette: Pető László Természetesen további finomítással, extrákkal bárki szabadon kiegészítheti, vagy készíthet egy jobbat.