Crtanje+u+Delphiju

Mnogo Delphi-jeve komponente imaju svojstvo **//Canvas (platno)//** koje predstavlja oblast komponente po kojoj se može crtati, ili na kojoj se mogu prikazivati gotovi crteži ili slike. Ovo svojsvto poseduju: forma, komponenta Image, tabela, štampač. Pri razvoju projekta na raspolaganju imate platno i njegova podsvojstva: pero za crtanje **//(Pen)//**, četku za bojenje **//(Brush)//** i više grafičkih primitiva (linija, pravougaonika, elipsa itd.) Dole navedena slika ilustruje platno **//(Canvas)//** i njegova podsvojstva.
 * // Canvas- platno za crtanje //**

Na primer: Canvas.Pen.Color:=clRed; Canvas.Pen.Width:=2; Canvas.Pen.Style:=psDot; itd. Po platnu možemo crtati svuda gde nije pokriveno upravljačkim elementima. Jedan od načina crtanja je bojenjem piksela. Piksel je elementarna jedinica lika koji se oboji u momentu kada se dvodimenzionalnom nizu Pixels dodeli broj koji reprezentuje boju. Na primer: **Canvas.Pixels****[10,20]:=clBlack;** Boja se može zadavati i korišćenjem funkcije: RGB. Ova funkcija je dobila ime od početnih slova tri boje: Red, Green, Blue. Funkcija je oblika: Parametri R,G i B imaju vrednosti od 0 do 255 i one su mera prisutnosti ovih boja u boji koju vraća funkcija RGB.
 * //Platno (Canvas)//** je pravougaona mreža koja se sastoji iz malih kvadratića koji se nazivaju pikseli (ili tačke). Položal piksela na platnu se zadaje horizontalnom (X) i vertikalnom(Y) koordinatom. Kao i kod većine sistema za implementaciju računarske grafike početak koordinatnog sistema platna je gornji levi ugao. Piksel koji se nalazi na toj poziciji ima koordinate **//(0,0)//**.Koordinate piksela koji se nalazi u donjem desnom uglu platna forme su **//(ClientWidth-1, ClientHeight-1)//**.
 * function RGB(R,G,B:byte):longint;**
 * RGB(255,0,0) zadaje crvenu boju**
 * RGB(0,255,0) zadaje zelenu boju**
 * RGB(0,0,255) zadaje plavu boju**

Napisati aplikaciju kojom se 10000 slučajno izabranih piksela pravougaone oblasti forme- čiji gornji levi ugao (0,0) a donji desni centar forme- boji “slučajnom” bojom. Koraci: 1.Započnite novu aplikaciju (File/New Application) 2.Izaberite za Form1 događaj OnPaint. Napišite sledeći kod za obradu događaja:
 * // Zadaci //**
 * __ 1.zadatak __**


 * procedure TForm1.FormPaint(Sender: TObject);**
 * var i:integer;**
 * Color:longint;**
 * begin**
 * Randomize;**
 * for i:=1 to 10000 do**
 * begin**
 * Color:=RGB(Random(255),Random(255),Random(255));**
 * Canvas.Pixels [Random(ClientWidth div 2), Random(Clientheight div 2)]:=Color;**
 * end;**
 * end;**

3. Sačuvajte aplikaciju (File/SaveAll) zatim je pokrenite (Run).

download zadatka:

Za bojenje piksela koristi se svojstvo platna Pixels.

U for ciklusu šta označava broj 10000 ? Primetićete da ako, u toku izvršavanja programa, menjate dimenzije forme ne dolazi do iscrtavanja u skladu sa novim dimenzijama. Ovaj nedostatak programa može se popraviti kreiranjem procedure koja reaguje na događaj forme OnResize.
 * procedure TForm1.FormResize(Sender: TObject);**
 * begin**
 * Repaint;**
 * end;**

Kreirati aplikaciju kojom se crta krug čiji je poluprečnik jednak četvrtini širine forme sa centrom u centru forme. Crtanje realizovati bojenjem pikslea u smeru suprotnokretanju kazaljke na satu. Krug se može jednostavno nacrtati kao specijalan slučaj elipse korišćenjem jedne metode (ali to ćemo pogledati kasnije). Centar kružnice je x0,y0. Događaj je na OnPaint: download zadatka: Kreirati aplikaciju kojom se crta figura Ying-Yang. Za crtanje koristiti metodu za crtanje luka sa centrom (xc,yc), poluprečnikom r i uglom od a do b. Obezbediti da se crtanje realizuje klikom da dugme Crtaj, a poluprečnik zadaje unosom vrednosti u odgovarajuću Edit kontrolu. Za crtanje luka kreirati sopstvenu metodu čije zaglavlje treba postaviti u sekciju public klase TForm1 da bi bila vidljiva u svim njenim metodama:
 * __ 2.zadatak __**
 * procedure TForm1.FormPaint(Sender: TObject);**
 * var xc,yc,r,x,y:integer;**
 * a:real;**
 * begin**
 * xc:=ClientWidth div 2; yc:=ClientHeight div 2;**
 * r:=xc div 2;**
 * a:=0;**
 * repeat**
 * x:=round(xc+r*cos(a));**
 * y:=round(yc+r*sin(a));**
 * Canvas.Pixels[x,y]:=clRed;**
 * a:=a+1/r;**
 * until a>=2*pi;**
 * end;**
 * __ 3.zadatak __**
 * publi**** c **
 * procedure Luk(xc,yc:integer;a,b:real);**
 * end;**

Realizaciju metode staviti u implementacionu sekciju, ali obavezno ispred imena staviti prefiks TForm1 koji definiše pripadnost klasi:
 * procedure TForm1.Luk(xc,yc,r:integer;a,b:real);**
 * var s:real;**
 * x,y:integer;**
 * begin**
 * s:=a;**
 * repeat**
 * x:=round(xc+r*cos(s)); y:=round(yc-r*sin(s));**
 * Canvas.Pixels[x,y]:=clBlue;**
 * s:=s+1/r;**
 * until s>b;**
 * end;**

Sada se može kreirati procedura za crtanje koja crta tri luka. Komponente su: Panel, btCrtaj, btBrisi, edR i jedna label komponenta **R**. Događaj na btCrtaj- OnClick: Događaj na btBrisis-OnClick:
 * procedure TForm1.btCrtajClick(Sender: TObject);**
 * var xc,yc,r:integer;**
 * begin**
 * xc:=(ClientWidth-Panel1.Width) div 2;**
 * yc:=ClientHeight div 2;**
 * r:=StrToInt(edR.text//);//**
 * Luk(xc,yc,r,0,pi);**
 * Luk(xc+r div 2, yc, r div 2, pi, 2*pi);**
 * Luk(xc-r div 2,yc, r div 2, 0,pi);**
 * //end;//**
 * procedure TForm1.btBrisiClick(Sender: TObject);**
 * begin**
 * refresh;**
 * end;**

download zadatka:

Kreirati aplikaciju koja crta N krugova poluprečnika R, čiji su centri na neiscrtanom janjima. Uputstvo: umesto da za crtanje kruga kreiramo novu metodu iskoristite metodu za crtanje luka sa uglovima od 0 do 2*pi. Luk(x,y,r,0,2*pi). Suština programa: download zadatka:
 * __ 4.zadatak __**
 * procedure TForm1.FormPaint(Sender: TObject);**
 * var xc,yc,n,r,i,x,y:integer;**
 * begin**
 * xc:=ClientWidth div 2;**
 * yc:=Clientheight div 2;**
 * r:=yc div 2;**
 * randomize;**
 * n:=random(30);**
 * for i:=0 to n-1 do**
 * begin**
 * x:=round(xc+r*cos(2*pi*i/n));**
 * y:=round(yc+r*sin(2*pi*i/n));**
 * Luk(x,y,r,0,2*pi);**
 * end;**
 * end;**

Svaka slika, crtež mogu se posmatrati kao skup grafičkih primitive: tačaka, linija, elipsi, lukova itd. To znači da program koji treba da obezbedi crtanje slike na ekranu mora uključiti iscrtavanje grafičkih elemenata-iva, koji obrazuju sliku. Crtanje grafičkih primitive na platnu se obezbeđuje primenom odgovarajućih metoda svojstva Canvas: **LineTo, PolyLine, Polygon, Rectangle, Polygon, Ellipse, TextOut**, itd.
 * // Grafički primitivi //**


 * Crtanje linija **

Crtanje u Delphi-ju se realizuje pomoću “pera”(Pen). To je nevidljivi objekat čije je tekuća pozicija uvek na poslednjem obojenom pikselu. Kada se kreira forma podrazumevajuća pozicija pera je (0,0). Za zadavanje tekuće pozicije pera služi metoda **MoveTo(x,y)** koja postavlja pero na poziciju x,y, ali je ne osvetljava. Od tekuće pozicije pera zadate sa MoveTo(x,y) do pozicije x1,y1 linija se izvači sa **LineTo(x1,y1)**. Tačka do koje je izvučena linija postaje nova tekuća pozicija pera. Peru se može zadati debljina sa Pen.Width, boja sa Pen.Color, stil sa Pen.Style **(psSolid, psDash,psDot, psDashDot, psDashDotDot,psClear,..)**

Nacrtati najveće X slučajne boje u granicama forme. Obezbediti da se crtanje realizuje pritiskom na dugme Crtaj. Predvideti brisanje pritiskom na dugme Brisi. __Koraci:__ 1. File/New/Application 2. Postaviti 2 Buttona (btCrtaj, btBrisi). Događaj za btCrtaj: Događaj na btBrisi:
 * __ 5.zadatak __**
 * procedure TForm1.btCrtajjClick(Sender: TObject);**
 * begin**
 * Randomize;**
 * with Canvas do**
 * begin**
 * Pen.Width:=10;}**
 * Pen.Color:=RGB(Random(255),Random(255),Random(255));**
 * pen.Style:=psDot;**
 * MoveTo(0,0);**
 * LineTo(ClientWidth-1,ClientHeight-1);**
 * MoveTo(ClientWidth-1,0);**
 * LineTo(0,ClientHeight-1);**
 * end;**
 * end;**
 * procedure TForm1.btBrisiClick(Sender: TObject);**
 * begin**
 * refresh;**
 * end;**

download zadatka: U ovom zadatku menjati boju, debljinu, stil linije. Kreirati aplikaciju kojom se crta pravilni N-to ugao sa centrom u središtu klijentske oblasti. Obezbediti da se iscrtavanje realizuje pri startovanju aplikacije (OnPaint) a broj temena zadaje korišćenjem SpinEdit kontrole. Iscrtavanje se može realizovati metodom OnPaint, koja se aktivira pri startovanju aplikacije.
 * __ 6.zadatak __**

Događaj na btCrtaj-OnClick:
 * procedure TForm1.FormPaint(Sender: TObject);**
 * var xc,yc,r,i,n:integer;**
 * begin**
 * with Canvas do**
 * begin**
 * xc:=(ClientWidth-Panel1.Width) div 2;**
 * yc:=ClientHeight div 2;**
 * r:=xc div 2;**
 * n:=SpinEdit1.Value;**
 * Pen.Width:=2;**
 * Pen.Color:=clblack;**
 * MoveTo(xc+r,yc);**
 * for i:=1 to n do**
 * LineTo(round(xc+r*cos(2*pi*i/n)),round(yc-r*sin(2*pi*i/n)));**
 * end;**
 * end;**
 * procedure TForm1.btCrtajClick(Sender: TObject);**
 * begin**
 * repaint;**
 * end;**

download zadatka: Kreirati aplikaciju koja crta zvezdu spajanjem N tačaka na zamišljenim krugovima poluprečnika R1 i R2 na ugaonom rastojanju 2pi/N. Dve susedne tačke sun a različitim krugovima. download zadatka:
 * __ 7.zadatak __**
 * procedure TForm1.btCrtajClick(Sender: TObject);**
 * var xc,yc,R,R1,R2,N,i:integer;**
 * begin**
 * xc:=(ClientWidth-Panel1.Width) div 2;**
 * yc:=ClientHeight div 2;**
 * R1:=StrToInt(edR1.Text);**
 * R2:=StrToInt(edR2.Text);**
 * N:=StrToInt(edN.Text);**
 * Canvas.MoveTo(xc+R1,yc);**
 * for i:=1 to N do**
 * begin**
 * if i mod 2=1 then R:=R2 else R:=R1;**
 * Canvas.LineTo(round(xc+R*cos(2*pi*i/n)),round(yc+R*sin(2*pi*i/n)));**
 * end;**
 * end;**

//** Proste figure **// Svako platno ima ugrađene metode crtanja nekoliko tipova prostih figura: pravougaonika, elipsi, kružnih sektora, lukova itd. Klasa elipsi uključuje krug kao specijalan slučaj. Osim prostih figura postoje u izlomljene linije i mnogouglovi.

Metoda rectangle iscrtava pravougaonik. U instrukciji kojom se poziva metoda treba navesti coordinate temena jedne njegove dijagonale. na primer. Canvas.Rectangle(10,10,50,50); Ovo će biti jedan pravougaonik čiji gornji levi ugao je u tački (10,10) a donji desni je u tački (50,50). To će biti u suštini jedan kvadrat. Boju, stil i širinu linije konture pravougaonika definišu svojstva pera (Pen), a boju I stil bojenja unutrašnjosti pravougaonika- vrednosti svojstva četke (Brush) platna na kome se crta pravougaonik. Na primer, sledeći operatori crtaju zastavu bivše Jugoslavije:
 * Pravougaonik **
 * with Canvas do**
 * begin**
 * brush.color:=clBlue;**
 * rectangle(10,10,90,30);**
 * brush.color:=clWhite;**
 * rectangle(10,30,90,50);**
 * brush.color:=clRed;**
 * rectangle(10,50,90,70);**
 * end;**

Kako možemo podesiti da linije budu nevidljive?

Kreirati aplikaciju kojom se crta N kcadrata sa zajedničkim presekom dijagonala, čije stranice čine geometrijsku progresiju sa koeficijentom 0<q<1. Komponente su: 1 Panel, a na njoj 1 Button (btCrtaj), 2 Label, 2 Edit (edQ, edN). Događaj **OnClick** na button Crtaj: Događaj na **OnClick** na button Ponovo:
 * __ 8.zadatak __**
 * procedure TForm1.btCrtajClick(Sender: TObject);**
 * var a,x,y,n,i:integer;**
 * q:real;**
 * begin**
 * x:=(ClientWidth-Panel1.Width) div 2;**
 * y:=ClientHeight div 2;**
 * a:=x*2;**
 * n:=StrToInt(edN.Text);**
 * q:=StrToFloat(edQ.Text);**
 * Canvas.Pen.Width:=2;**
 * for i:=1 to n do**
 * begin**
 * Canvas.Rectangle(x-a div 2, y-a div 2, x+a div 2, y+a div 2);**
 * a:=round(a*q);**
 * end;**
 * end;**
 * procedure TForm1.btUjbolClick(Sender: TObject);**
 * begin**
 * refresh;**
 * end;**

download zadatka:

Elipsa i kružnica se crtaju pomoću metode elipse. U opštem obliku metoda se poziva na sledeći način: Parametri x1,y1,x2,y2 definišu temena dijagonale pravougaonika unutar koga se iscrtava elipsa ili krug (ako je pravougaonik kvadrat).
 * Kružnica i elipsa **
 * Canvas.Ellipse(x1,y1,x2,y2);**

Kreirati aplikaciju koja crta krugove slučajne dužine poluprečnika sa centrom na horizontalnoj osi forme.
 * __ 9.zadatak __**
 * procedure TForm1.FormPaint(Sender: TObject);**
 * var x,y,r:integer;**
 * begin**
 * x:=0;y:=ClientHeight div 2; Randomize;**
 * with Canvas do**
 * begin**
 * Pen.Width:=3;**
 * Brush.Color:=clYellow;**
 * r:=random(y);**
 * while x<=ClientWidth do**
 * begin**
 * Ellipse(x,y-r,x+2*r,y+r);**
 * x:=x+2*r;**
 * r:=random(y);**
 * end;**
 * end;**
 * end;**

download zadatka:


 * Kružni luk Arc**

Metoda Arc crta luk- deo elipse (kružnice). __Opšti oblik:__ Canvas.Arc(x1,y1,x2,y2,x3,y3,x4,y4); Parametri x1,y1,x2,y2 definišu elipsu čiji je deo luk. Na osnovu parametara (x3,y3) i (x4,y4) zadaju se početna i krajnja tačka luka. Početna tačka luka je tačka preseka elipse i prave koja prolazi kroz centar elipse i tačku (x3,y3); krajnja tačka luka je tačka preseka elipse i prave koja prolazi kroz centar elipse i tačku (x4,y4), u smeru suprotno kretanju kazaljki na satu.


 * Izlomljene linije i mnogouglovi- PolyLine és Polygon**

Kreirati aplikaciju koja crta petougao i unutar njega slovo M koristeći sledeći kod: Događaj **OnPaint** : download zadatka: Zadaci za vežbu: 1. Kreirati aplikaciju sa olimpijskim krugovima. 2.Kreirati aplikaciju koja će iscrtati jednu kuću.
 * __ 10.zadatak __**
 * procedure TForm1.FormPaint(Sender: TObject);**
 * begin**
 * with Canvas do**
 * begin**
 * Pen.Width:=10;**
 * Brush.Color:=clYellow;**
 * Polygon([Point(150,20),Point(260,100),Point(220,220),Point(80,220),**
 * Point(40,100)]);**
 * PolyLine([Point(110,160),Point(110,100),Point(150,160),Point(190,100),**
 * Point(190,160)]);**
 * end;**
 * end;**