Univerzitet u Novom Sadu Tehniki fakultet Mihajlo Pupin Zrenjanin

RAUNARSKA GRAFIKA II
-seminarski rad-

Student: Mladen Cvijanovi, br. dosijea IT 134/12 Smer: Informatika u obrazovanju

Zrenjanin, 2013.

Univerzitet u Novom Sadu Tehniki fakultet Mihajlo Pupin Zrenjanin

RAUNARSKA GRAFIKA II
-seminarski rad-

Mentor: Prof. dr Ivana Berkovi M.Sc Zlatibor Veljkovi

Student: Mladen Cvijanovi, br. dosijea IT 134/12 Smer: Informatika u obrazovanju

Zrenjanin, 2013.

SADRAJ:
1. WINDOWS APLIKACIJA..................................................................................... 4 2. BORLAND DELPHI 7.0 ......................................................................................... 5 3. RAD S GRAFIKOM ............................................................................................... 7 3.1 Crtanje linija .............................................................................................. 8 3.2 Crtanje pravougaonika ............................................................................... 8 3.3. Pomjeranje predmeta po prozoru ............................................................... 8 3.3.1. Kretanje predmeta preko neke pozadine ................................................. 9 3.3.2. Kretanje predmeta u okviru prozora........................................................ 9 3.3.3. Pomjeranje predmeta ............................................................................ 10 4. PRIMJERI APLIKACIJA SA GRAFIKOM U DELPHIJU............................... 12 5. ZAKLJUAK ....................................................................................................... 15 6. LITERATURA ...................................................................................................... 16

Seminarki rad

Raunarska grafika 2

1. WINDOWS APLIKACIJA
Aplikacije su programski sistemi projektovani za rjeavanje odreenog problema. Osnovna odlika aplikacija pod operativnim sistemom MS Wiindows jeste sprega aplikacije i korisnika, zasnovana na prozorima i drugim vizuelnim komponentama. Pomou ovih komponenti korisnik upravlja radom aplikacije i prima povratne informacije od nje. Prozori mogu da se predstave kao okviri koji spajaju komponente u logike cijeline. Sastavni dio svake aplikacije predstavlja bar jedan prozor koji se naziva glavni prozor. Osim njega aplikacija moe da ima, ali i ne mora, jo prozora koji se nazivaju sekundarni prozori. Glavni prozor se uglavnom stalno nalazi na ekranu, dok se sekundarni prozori pojavljuju i nestaju u zavisnosti od trenutnih potreba. Ima sluajeva kada se sekundarni prozori due zadravaju na monitoru. Po namjeni, specijalnu vrstu sekundarnih prozora ine prozori za dijalog, koriste se za saoptavanje poruka korisniku kao i za primanje informacije od strane korisnika. Postoje dva tipa ovih prozora, to su usvojeni i neusvojeni. Kod usvojenih prozora korisnik ne moe da pristupi glavnom prozoru dok god je ovaj aktivan, dok to sa neusvojenim nije slu aj. Ako postoji vie prozora oni se meusobno iscrtavaju jedan preko drugog s tim to je aktivni prozor jedini vidljiv u cjelini. Korisnik moe pomou mia da smjenjuje aktivni prozor. Takoe postoji i specijalna vrsta prozora koja se nalazi unutar aktivnog prozora. Ti prozori predstavljaju djecu prozora u ijem su radnom okruenju. Ti prozori mogu da se pomjeraju samo unutar radnog prostora njegovog roditelja, a pomjeranjem roditelja pomjeraju se i djeca. Osnovni rad sa prozorima pod Windows-ima jeste miem, mada se u tu svrhu moe koristiti i tastatura. Postupak izrade aplikacije naziva se projektovanje aplikacije ili skraeno samo projekat.

Mladen Cvijanovi

Strana 4 od 16

Seminarki rad

Raunarska grafika 2

2. BORLAND DELPHI 7.0

Programsko okruenje Delphi je integrisano razvojno okruenje za izradu aplikacija pod MS Windows operativnim sistemima. U njemu su integrisane alatke za lako i brzo organizovanje sprege aplikacija-korisnik. Ovaj programski jezik baziran je na programskom jeziku Object Pascal. Programski jezik Pascal nastao je krajem ezdesetih godina dvadesetog vijeka, kao odgovor na problem projektovanja i odravanja velikih programskih sistema. Njegov tvorac je Niklaus Wirth. Sam naziv ovaj programski jezik je dobio po francuskom filozofu, matematiaru i fiziaru Baliseu Pascalu. Programski jezik Pascal je u potpunosti struktuirani programski jezik. To jest programi se piu kao jasne i lako razumljive strukture . Za programski jezik Pascal postoji i ISO standard. Standardni Pascal je jezik koji se sastoji od jednostavne i logine strukture pa se zbog toga relativno brzo ui. Veoma je pogodan za poetnike. Meutim i pored toga to predstavlja dobro struktuiran programski jezik Pascal ima i ozbiljnih mana koje ga ne ine podesnim za pisanje velikih programskih sistema. Jedan od prvih ozbiljnih zamjerki ovom programskom jeziku je to to zahtijeva da cijelokupan program sa svim svojim podprogramima bude u jednoj datoteci. Druga mana su vrlo ograniene mogunosti rada sa datotekama. Pascal predvia samo sekvencijalni pristup datotekama. Ne postoje relativne datoteke s direktnim pristupom niti indeksne datoteke koje bi omoguavale pristup pomou kljua. Trea mana je nefleksibilnost potprograma pri radu sa nizovima. Programski jezik Turbo Pascal firme Borland pojavio se na personalnim raunarima pod operativni sistemom MS-DOS, s nekoliko nestandardnih proirenja. Neka od tih proirenja obezbjedila su bolju iskorienost hardvera raunara i otklanjanje nedostataka standardnog Pascala-a. Sa Turbo Pascal-om uvedeni su novi tipovi promjenjivih, koji su bolje iskoritavale hardver raunara. Zatim, izgubljena je potreba da se program pie samo u jednoj datoteci nego se on dijeli na vie modula. Ti moduli se prevode odvojeno i nazivaju se jedinice prevoenja. Takoe je poboljan rad sa datotekama. Uvedena je mogunost dodjeljivanja simbolikih naziva fizikim datotekama u toku izvravanja programa. Do sada je objavljeno sedam verzija ovog programskog jezika. A najvee proirenje napravljeno je u Turbo Pasal-u 5.5, kad se u programski jezik uvodi mogunost rada sa objektima i podrke za izradu aktivnih sprega aplikacije sa korisnikom, zasnovane na prozorima i menijima (Turbo Vision), pri radu sa operativnim sistemom MS-DOS.

Mladen Cvijanovi

Strana 5 od 16

Seminarki rad

Raunarska grafika 2

U posljednjih deset godina, na personalnim raunarima, sve vie se koristi operativni sistem MS Windows. Tako da je firma Borland 1995. godine proizvela i objavila svoje programsko okruenje Delphi koje je bilo namjenjeno za rad pod operativnim sistemom MS Windows. Programsko okruenje Delphi je bazirano na programskom jeziku Object Pascal koje prestavlja objektno proirenje Turbo Pascal-a, ovaj programski jezik svoj naziv mijenja u Delphi po izlasku sedme generacije ovog okruenja. Delphi je potpuno objektno orjentisan programski jezik. To znai da se prilikom programiranja u centar panje postavlja objekat, za razliku od strukturiranog programiranje gdje se u centar postavlja struktura. Objekti su Inteligentni podaci koji mogu da se nalaze u odreenim stanjima. Ta stanja mogu da se promjene primjenom odreenih metoda. Skup objekata sa istim osobinama ine jednu klasu. Klase su analogne tipovima podataka, kao to su cijeli brojevi i slino, samo to prestavljaju proizvoljno sloene apstraktne objekte. Programer koji radi u ovom okruenju moe da direktno poziva funkcije Windows-ovog API, poto su i one neposredno podrane, mada zato uglavnom nema potrebe.

Mladen Cvijanovi

Strana 6 od 16

Seminarki rad

Raunarska grafika 2

3. RAD S GRAFIKOM
Kada elimo da u Delphi-ju da nacrtamo neto mi u stvari crtamo preko odreenog platna (Canvas) koje se u stvari prostire preko nae aplikacije ili objekta na kome crtamo. Ovo platno, ili mrea se sastoji iz niza piksela, odnosno mrea je podijeljena horizontalnim i vertikalnim linijama. Tako svaki piksel ima svoje X i Y koordinate. Koordinatni po etak ovog platna je kao i kod veine slinih sistema za implementaciju grafike je u gornjem levom uglu. Taka u gornjem levom uglu ima koordinate X=0 i Y=0, dok taka u donjem desnom uglu prozora ima koordinate X=ClientWidth-1 i Y=ClientHeight-1, gde ClientWidth i ClientHeight predstavljaju irinu i visinu klijentske oblasti. Crtanje na ovom platnu se u stvari vri tako to se osvijetljava pojedinani piksel ovog platna odreenom bojom. Ovo platno predstavlja u stvari objekat tipa TCanvas koji ima svoja odreena svojstva kao i metode. Ovo platno ima svojstvo Pixels[X,Y], koje predstavlja odreeni piksel gde su X i Y njegove koordinate. Znai, ukoliko bi eljeli da obojimo piksel na poziciji 5,20 utom bojom pisali bi sledee : Canvas.Pixels[5,20]:=clYellow. Kao to vidimo boje su predstavljene njihovim imenom, s tim to ispred imena ide prefiks cl to je skraeno od color. Boja je tipa TColor, tako da bi za neku promenljivu Boja pisali : var Boja : Tcolor. Meutim, postoji i nain da se boja prikae kao broj, jer je svakoj boji dodijeljen odreen broj pa bi za neku promjenljivu Boja mogli da piemo i sledee : var Boja : Longint. Takoe, dozvoljeno je i obrnuto, odnosno ukoliko bi eleli da neka promenljiva dobije vrijednost boje nekog piksela pisali bi : Prvo bi definisali promenljivu recimo boja Var Boja:TColor; Nakon toga bi pisali sledeu naredbu : Boja:=Canvas.Pixels[5,20]; to se tie platna (Canvas) njega poseduju komponente : Form, Image, Printer i StringGrid. Svojstvo Canvas ima svoja podsvojstva : Pen pero za bojenje, Brush etku za bojenje, Font font, Pixels Pikseli koji ine ovu mreu i PenPos pozicija pera za crtanje. Podsvojstvo Pen ima svoja svojstva : Color -boja, Style -stil, Mode reim rada i Width irina, podsvojstvo Brush ima svoja svojstva : Color boja i Style stil, podsvojstvo Font ima svoja svojstva : Color boja, Style stil, Size veliina i Name ime, dok se sa podsvojstvima Pixels i PenPos postupa na drugaiji nain. Postoji jo jedan nain definisanja boja a to je korienje funkcije RGB. Ona je sledeeg oblika : Function RGB(R:Byte, G:Byte, B:Byte):longint, gde paramatri R,G i B predstavljaju uee R(Red)-crvene, G(Green)-zelene i B(Blue)-plave boje u onoj boji koju vraa funkcija RGB, s tim da ovi parametri mogu da budu u opsegu od 0 (odsustvo boje) do 255 ) puno prisustvo boje). Na taj nain crvena boja bi bila predstavljena kao RGB(255,0,0), zelena kao RGB(0,255,0) a plava kao RGB(0,0,255).

Mladen Cvijanovi

Strana 7 od 16

Seminarki rad

Raunarska grafika 2

3.1 Crtanje linija

Crtanje linije se vri pomou takozvanog pera Pen, tanije njegovim metodom LineTo(X,Y) gde X i Y parametri predstavljaju koordinate take do koje se vri crtanje linije, s tim da poetnu taku definie aktuelni poloaj gde se nalazimo. U trenutku startovanja aplikacije poloaj pera je u taki 0,0 tj. u gornjem levom uglu. Pozicija pera se moe oitati svojstvom PenPos, ali ne i menjati. Pomjeranje do odreene take (bez ikakvog crtanja) vri se metodom MoveTo(X,Y), gde X i Y parametri predstavljaju koordinate take gde se pero pomjera. Znai ako bi eleli da crtamo recimo 2 paralelne linije pisali bi sledei kod : Canvas.MoveTo(50,50); Canvas.LineTo(50,150); Canvas.MoveTo(100,50); Canvas.LineTo(100,150); Prvom naredbom MoveTo(50,50) pomjerili bi smo se na taku sa koordinatama 50,50 (na poetku u trenutku startovanja aplikacije se nalazimo u gornjem lijevom uglu ije su koordinate 0,0), zatim bi smo naredbom LineTo(50,150) nacrtali liniju do take sa koordinatama 50,150, zatim bi smo se naredbom MoveTo(100,50) pomjerili do take sa koordinatama 100,50 i na kraju bi naredbom LineTo(100,150) povukli liniju do take sa koordinatama 100,150 i na taj nain bi smo nacrtali 2 paralelne linije. Nain na koji penkalo crta moe se mijenjati, recimo debljina pera metodom Pen.Width, boja metodom Pen.Color a stil metodom Pen.Style (psSolid, psDash, psDot, psdashDot, psDashDotDot, psClear, psInsideFrame). Brisanje crtea se vri metodom Refresh to u stvari predstavlja dodeljivanje one boje pikselima u kojima je prikazan aktuelni obrazac.

3.2 Crtanje pravougaonika

Crtanje pravougaonika se vri metodom Rectangle(X1,Y1,X2,Y2), gde X1 i Y1 predstavljaju koordinate gornjeg lijevog tjemena pravougaonika, a X2 i Y2 koordinate donjeg desnog temena pravougaonika. Tako e, postoji i jo jedna grupa pravougaonika sa zaobljenim vrhom gde se osim ovih parametara navode jo 2 parametra koji predstavljaju zaobljenost i oni se crtaju metodom RoundRect(X1,Y1,X2,Y2,zx,zy) gde zadnja 2 parametra predstavljaju zaobljenost u x i y smeru. Kvadrati se crtaju kao pravilni pravougaonici.

3.3. Pomjeranje predmeta po prozoru

esto je u aplikacijama potrebno da ostvarimo kretanje predmeta po prozoru. Ukoliko te predmete predstavimo kao slike to kretanje preko prozora emo ostvariti pomou komponente Image. Naime u komponentu Image emo postaviti odreenu sliku i mijenjanjem njenog poloaja na prozoru tj. mijenjanjem njenih svojstava Left i Top mjenjati njen poloaj u odreenom vremenskom trenutku to emo najbolje postii kombinacijom sa komponentom Timer. Takoe, ukoliko imamo vie slika tog istog predmeta u razliitim poloajima moemo Mladen Cvijanovi
Strana 8 od 16

Seminarki rad

Raunarska grafika 2

naizmjeninim mjenjanjem svojstva Picture komponente Image postii potpuni utisak da se predmet kree po prozoru, a pogodnim mjejanjem vremenskog intervala i pomjeranja moemo postii vrlo dobru animaciju.

3.3.1. Kretanje predmeta preko neke pozadine

Ako elimo da izvedemo kretanje nekog predmeta preko neke pozadine koja se nalazi preko cijelog prozora nae aplikacije. Prvo emo postaviti pozadinu, odnosno odreenu sliku preko cijelog prozora nae aplikacije. To emo postii tako to emo postaviti komponentu Image1 na na formular a zatim njeno svojstvo Align postaviti na alClient tako da se ona prostire preko cijelog formulara. Zatim emo u nju postaviti sliku pozadine. Neka ova slika predstavlja pejza po kome e se kretati drugi predmet.. Sada imamo sliku preko cijelog prozora i sliku koju smo stavili u gornji desni ugao prozora tako da moemo pristupiti kretanju slike po ovom drugoj slici. To emo ostvariti tako to emo smanjivati svojstvo Left kontrole Image2 na svakih recimo pola sekunde a to emo realizovati tako to na formular postavljamo komponentu Timer1 iji interval postavljamo na 500 (pola sekunde) i koji e izazivati umanjenje svojstva Left. U proceduri za obradu dogaaja Timer1Timer bi imali sledei i jedini kod : Procedure TForm1.Timer1Timer(Sender: TObject);beginImage2.Left:=Image2.Left-10;end; Na ovaj nain smo postigli animaciju. i pravilnim odabiranjem vremenskog intervala koji izaziva pomjeranje kao i pravilnim izabiranjem prirataja, u naem sluaju -10 jer se predmet kree s desne ka lijevoj strani, moemo postii vrlo glatku animaciju.

3.3.2. Kretanje predmeta u okviru prozora

U prethodnom primjeru smo videli kako se vri kretanje predmeta preko formulara a sada emo videti kako moemo kontrolisati kretanje predmeta u okviru formulara, odnosno kako postii da se predmet kada doe do ivice formulara odbije o njegovu ivicu, odnosno nastavi kretanje u suprotnom smjeru. Recimo, elimo da kreiramo aplikaciju koja e simulirati kretanje loptice u prozoru, kao i njeno odbijanje o ivice prozora. U nau aplikaciju emo ukljuiti jednu Shape kontrolu koja e simulirati lopticu i kojoj emo staviti svojstvo Shape na stCircle odnosno dodjeliemo joj oblik kruga, a svojstvo Brush, tanije podsvojstvo Color emo podesiti na clYellow tako da ima utu boju. Veliina ove komponente e biti 25, odnosno Heiht i Width e biti 25. Takoe, dodaemo i kontrolu Timer1 kojoj emo podesiti Interval na 100 i koji e u tom vremenskom intervalu inicirati kretanje. Naem prozoru emo promjeniti svojstvo BorderStyle na Dialog da bi ivice prozora bile nepromjenljive. Ostaje nam jo da u kretanje ukluimo i promjenu pravca kada predmet doe do ivica. To je sve to nam je potrebno od komponenata. Sada emo kretanje urediti na sledei nain : Shape1.Left:=Shape1.Left+10 ako se predmet kree na desno, Shape1.Left:=Shape1.Left-10 ako se predmet kree na lijevo, Mladen Cvijanovi
Strana 9 od 16

Seminarki rad

Raunarska grafika 2

Shape1.Top:=Shape1.Top+10 ako se predmet kree na dole i Shape1.Top:=Shape1.Top-10 ako se predmet kree na gore, gde se kao to vidimo predmet pomjera u jednom trenutku za prirataj od 10. Meutim poto predmet mijenja pravac u odnosu na ivicu na koju je naiao bolje emo urediti kretanje na sledei nain : Shape1.Left:=Shape1.Left+Znak1*10 i Shape1.Top:=Shape1.Top+Znak2*10, gde promjenljive Znak1 i Znak2 naizmjenino uzimaju vrijednosti 1 i -1 i na taj nain odreuju smjer kretanja. Ove preomjenljive emo definisati kao globalne za cio unit u odeljku var za Unit1. Na po etku emo im dodjeliti vrijednost Znak1:=1 i Znak2:=1, to moemo pisati u proceduri za obradu dogaaja FormCreate jer on nastaje samo jednom u trenutku kada se kreira forma, to odreuje da se predmet kree desno na dole. Sad emo u proceduru za obradu dogaaja Timer1.Timer pisati sledei kod : Procedure TForm1.Timer1Timer(Sender: TObject); begin If (Znak1=1) and (Shape1.Left>ClientWidth-25) then Znak1:=-Znak1; If (Znak1=-1) and (Shape1.Left<0) then Znak1:=-Znak1; If (Znak2=1) and (Shape1.Top>ClientHeight-25) then Znak2:=-Znak2; If (Znak2=-1) and (Shape1.Top<0) then Znak2:=-Znak2; Shape1.Left:=Shape1.Left+Znak1*10; Shape1.Top:=Shape1.Top+Znak2*10; end; Na ovaj nain postiemo kretanje predmeta u prozoru, s tim da on ostane u granicama prozora tako to se odbija od ivica kada naie na njih i tako beskonano ukoliko se u aplikaciju ne ukljui i neka komponenta koja bi zaustavljala kretanje predmeta. to se tie kretanja ono se moe modifikovati i ovde tako da se dobiju to bolji rezultati, a oni su najbolji pre svega kod malih predmeta i kada je prirataj za koji se vri promjena kretanja mali, a interval komponente Timer to manji tako da se esto izaziva promjena kretanja. Takoe, sa aplikacijom se moe eksperimentisati mjenjanjem dimenzije predmeta, boje predmeta, veliine prozora kao i dodavanjem jo nekih elemenata tako da se dobije efektniji rezultat.

3.3.3. Pomjeranje predmeta

Korisnik moe pomjerati predmet bilo tastaturom ili miem. Ovde emo se opredeliti da korisnik izaziva pomjeranje predmeta preko tastera na tastaturi. Postupak se svodi na pisanje koda u proceduri za obradu dogaaja FormKeyPress u zavisnosti od tastera koje smo odabrali da se pomou njih izvodi kretanje.to se tie tastature odabraemo da se kretanje vri na sledei nain : W gore, Z dole, A levo i S desno. Kretanje predmeta se izvodi na slian nain kao do sada, odnosno poveaemo ili smanjiti poloaj predmeta, tanije njegova svojstva Left i Top, odnosno svojstva komponente Image1 u kojoj e se nalaziti slika. Znai na prozor emo postaviti komponentu Image1 u nju postaviti sliku automobila koja se nalazi na hard disku i zove se Auto. Podesiemo svojstva komponete Image1 Strech na true i Transparent na true. Sada emo u proceduru za obradu dogaaja Form1.OnKeyPress pisali sledei kod : Procedure TForm1.FormKeyPress(Sender: TObject; var Key: Char);

Mladen Cvijanovi

Strana 10 od 16

Seminarki rad

Raunarska grafika 2

beginIf Key='w' then Image1.Top:=Image1.Top-10;If Key='z' then Image1.Top:= Image1.Top+10;If Key='a' then Image1.Left:= Image1.Left-10;If Key='s' then Image1.Left:= Image1.Left+10;end; Nakon startovanja imaemo aplikaciju koja na osnovu toga ta korisnik pritisne na tastaturi vri pomjeranje malog automobila iju sliku smo ubacili u komponentu Image1 i iji emo u stvari poloaj i mijenjati.

Mladen Cvijanovi

Strana 11 od 16

Seminarki rad

Raunarska grafika 2

4. PRIMJER APLIKACIJe SA GRAFIKOM U DELPHIJU

Kreirati aplikaciju u kojoj se po formi iscrtava krug koji dodiruje sve etiri ivice forme. Preko spinedit kontrole se poveava broj krugova koji se iscrtavaju tako da se svi krugovi vide na formi. Svaki krug je razliite boje. (irina i visina forme moraju biti iste, spinedit min=1, value=1)

Slika 1. Krug koji dodiruje sve etiri ivice forme

Slika 2. Povean broj krugova preko spinedit kontrole

Mladen Cvijanovi

Strana 12 od 16

Seminarki rad

Raunarska grafika 2

Slika 3. Zavrna forma aplikacije

Kod: var Form3: TForm3; n:integer; implementation uses unit1; {$R *.dfm} procedure TForm3.FormPaint(Sender: TObject); var x1,y1,x2,y2,i,a,b:integer; begin randomize; n:=spinedit1.Value; a:=clientwidth; b:=round(a/n); x1:=0;y1:=0;x2:=x1+b;y2:=y1+b; for i := 1 to n do begin canvas.brush.color:=rgb(random(255),random(255),random(255)); canvas.Ellipse(x1,y1,x2,y2); Mladen Cvijanovi
Strana 13 od 16

Seminarki rad x1:=x2;x2:=x1+b; end; end; procedure TForm3.SpinEdit1Change(Sender: TObject); begin refresh; end; end.

Raunarska grafika 2

Mladen Cvijanovi

Strana 14 od 16

Seminarki rad

Raunarska grafika 2

5. ZAKLJUAK
U okviru ovog seminarskog rada prikazan je princip rada sa grafikom u programskom jeziku Borland Delphi. Prikazane su osnovne funkcije i kontrole za rad sa grafikom u ovom programskom jeziku. Na kraju je prikazana aplikacija koja na ilustrativan primjer prikazuje kreiranje Formi koje se baziraju na grafikom prikazivanju objekata.

Mladen Cvijanovi

Strana 15 od 16

Seminarki rad

Raunarska grafika 2

6. LITERATURA
[1] Delphi 7 majstor, Marco Cantu [2] Programsko okruenje Delphi 7 sa rijeenim zadacima, Laslo Kraus [3] Delphi programiranje punom snagom, Charles Calvert [4] ERwin OnLine Help [5] Borland Delphi 7.0 OnLine Help [6] Multimedija majstor, Tay Vaughan

Mladen Cvijanovi

Strana 16 od 16