Elemente de grafic in Visual Basic.Net

Laboratorul 2 Elemente de grafic n Visual BasicCe ne propunem astzi? n acest laborator ne propunem s realizm o aplicaie simpl de grafic similar Microsoft Paint, urmrind familiarizarea cu noiunea de grafic persistent precum i cu metodele grafice principale.

Mai pe larg, vom proceda astfel:Pentru realizarea ferestrei principale a aplicaiei se utilizeaza un meniu (MenuStrip), o bar de unelte (ToolStrip) i suprafaa pentru desenare (PictureBox) n care utilizatorul va putea desena sau ncrca o imagine de tip bitmap (Figura 1).

Figura 1. Fereastra principal a aplicaiei

Pentru ca controlul PictureBox s ocupe ntreaga suprafa client a ferestrei aplicaiei, selectai controlul, dai click pe caseta din colul dreapta-sus a chenarului de selecie i selectai comanda Dock in parent container (vezi Figura 2).

1

Laborator 2 MTP

Figura 2. Setarea proprietii Dock in parent container pentru controlul PictureBox

Pentru a aduga o comand de meniu valid este necesar introducerea textului care va fi afiat n interfaa grafic a ferestrei (proprietatea Text). Vor fi adugate comenzile de meniu vizibile n Figura 3.

Figura 3. Meniul aplicaiei

Se va completa bara de unelte cu butoanele care se vd n Figura 1. Toate obiectele de pe controlul ToolStrip vor fi de tipul Button (Figura 4).

2

Elemente de grafic in Visual Basic.Net

Figura 4. Adugarea de butoane pe ToolStrip

Iat cteva proprieti utile ale obiectelor de tip ToolStripButton: DisplayStyle permite setarea aspectului unui control de tip ToolStripButton (Text, Image sau ImageAndText) TextImageRelation permite stabilirea poziiei textului n raport cu imaginea (Overlay, ImageAboveText, ImageBeforeText, TextAboveImage, TextBeforeImage) ToolTipText textul care apare atunci cnd cursorul de mouse este poziionat deasupra butonului.

n continuare se seteaz proprietatea DisplayStyle la valoarea ImageAndText, proprietatea TextImageRelation la valoarea ImageAboveText. Desenarea interfeei grafice a aplicaiei fiind ncheiate, vom continua cu indicaii privitoare la codul care trebuie scris pentru ca aplicaia s funcioneze corect. Originea sistemului de coordonate asociat controlului PictureBox se afl n colul stnga-sus al acestuia. Aplicaia poate fi dezvoltat utiliznd metodele grafice ale unui obiect de tip Graphics. Un obiect de tip Graphics poate fi asociat cu diverse suprafee de desenare, de exemplu, suprafaa controlului PictureBox. n exemplul urmtor se scrie cod pentru trasarea unei linii din coltul stnga sus pn n colul dreapta jos al controlului de tip PictureBox:Dim myGraphics As Graphics = PictureBox1.CreateGraphics() myGraphics.DrawLine(Pens.Black, 0, 0, PictureBox1.Width, PictureBox1.Height)

Grafica reprezentat prin codul de mai sus este considerat a fi grafic nepersistent (elementele grafice nu sunt redesenate, de exemplu n cazul obturrii pariale sau totale a controlului de tip PictureBox). Pentru a evita astfel de situaii vom implementa faciliti de grafic persistent, lucrnd cu un obiect de tip Bitmap.Dim myBitmap As Bitmap

n mod uzual un obiect de tipul PictureBox este folosit pentru a afia coninutul unor fiiere grafice. Obiectele de tip Bitmap sunt de regul utilizate pentru stocarea n memorie, pixel cu pixel, a unor imagini grafice. Clasa Graphics ofer numeroase metode grafice pentru desenarea de obiecte grafice (linii, elipse, dreptunghiuri, curbe Bezier etc.).

3

Laborator 2 MTP

Pentru ca grafica realizat cu ajutorul aplicaiei noastre s fie persistent, exemplul cu linia trasat pe diagonala principal a controlului PictureBox se poate rescrie astfel:'evenimentul Load al formularului... 'crearea unui bitmap avand aceleasi dimensiuni cu controlul PictureBox myBitmap = New Bitmap(PictureBox1.Width, PictureBox1.Height) myGraphics = Graphics.FromImage(myBitmap) ... 'desenarea unei linii in obiectul de tip Bitmap (asociat obiectului myGraphics) myGraphics.DrawLine(Pens.Black, 0, 0, PictureBox1.Width,PictureBox1.Height) 'asocierea imaginii de fundal a controlului PictureBox cu obiectul Bitmap PictureBox1.Image = myBitmap

Modificarea culorii de fundalPentru alegerea unei colori se va folosi controlul ColorDialog. Acest control permite afiarea unei ferestre de dialog standard pentru alegerea unei culori. Pentru afiarea dialogului trebuie apelat metoda ShowDialog().

Figura 5. Fereastra standard pentru alegerea culorii

Fereastra de dialog va fi afiat modal, iar culoarea aleas va fi returnat de ctre proprietatea Color. Pentru modificarea culorii de fundal a suprafeei de desenare va fi utilizata metoda Clear a obiectului myGraphics. Rezultatul apelrii acestei metode va fi tergerea tuturor elementelor grafice i umplerea fundalului cu o culoare uniform. Aceeai metod va fi utilizat i la curarea suprafeei de desenare.ColorDialog1.ShowDialog() myGraphics.Clear(ColorDialog1.Color) PictureBox1.Image = myBitmap

4

Elemente de grafic in Visual Basic.Net

Modificarea culorii de desenare i a grosimii desenuluiPentru modificarea culorii de desenare va fi afiat fereastra controlului ColorDialog. Pentru specificarea culorii de desenare precum i a grosimii desenului este necesara utilizarea unui obiect de tipul Pen.Dim myPen As Pen 'crearea unui creion de culoare albastra si grosime 2 pixeli. myPen = New Pen(Color.Blue, 2)

Pentru modificarea grosimii desenului va fi trebui afiat o fereastr ca cea din Figura 6. La crearea acesteia, fereastra va fi aleas ca fiind de tipul Dialog.

Figura 6. Alegerea grosimii de desenare

Fereastra va conine un control de tipul NumericUpDown. Acesta permite introducerea sau modificarea unei valori numerice ntregi prin introducerea de la tastatur a unui numr sau alegerea lui prin apsarea sgeilor sus/jos asociate. Valoarea introdus este dat de proprietatea Value a acestuia. Pentru apelarea din cod a ferestrei dialog se va utiliza urmtoarea secven de cod:Dim f As New Dialog1 If f.ShowDialog() = Windows.Forms.DialogResult.OK Then '... 'apelarea membrilor obiectului f End If

Metoda ShowDialog va returna o constant care corespunde butonului apsat de utilizator (n cazul nostru, OK sau Cancel).

Desenarea de puncteUtilizatorul va putea s deseneze puncte atunci cnd va apsa butonul stnga al mouse-ului deasupra suprafeei de desenare. n consecin, se va identifica evenimentul corespunztor acestei operaii. Acesta este MouseDown. Spre deosebire de Visual Basic 6, n Visual Studio 2008, nu exista o metoda dedicata pentru de desenarea de puncte. Pentru a desena un pixel se va trasa o elips cu limea i nlimea de un pixel.myGraphics.DrawEllipse(myPen, x, y, 1, 1) PictureBox1.Image = myBitmap

5

Laborator 2 MTP

Desenarea de liniiUtilizatorul va putea desena segmente de dreapt definind prima pereche de coordonate (x,y) la apsarea butonului stnga a mouse-ului, iar a doua pereche la eliberarea butonului. ntre apsarea i eliberarea butonului de mouse, utilizatorul va deplasa cursorul de mouse ntre cele dou puncte care vor defini segmentul de dreapt dorit. Metoda grafic ce permite desenare de linii este DrawLine.

Sfaturi utile Cele mai importante evenimentele de mouse asociate controlului PictureBox care permit desenarea prin definirea corect a coordonatelor unei figuri sunt: MouseDown: definirea primei perechi de coordonate (x1,y1) MouseMove: definirea celei de a doua perechi de coordonate (x2,y2). Tot aici are loc desenarea figurii ntre perechile de coordonate (x1,y1) i (x2,y2).

Desenarea de dreptunghiuriDesenarea de dreptunghiuri se va efectua preciznd coordonatele coltului stnga sus al dreptunghiului, a limii i nlimii lui. Metoda grafic ce permite desenare de dreptunghiuri este DrawRectangle.

Desenarea de elipseDesenarea unei elipse se va putea efectua prin precizarea colului stnga-sus (apsarea butonului stnga al mouse-ului) i a limii i nlimii dreptunghiului circumscris elipsei. Metoda grafic ce permite desenarea de elipse este DrawEllipse.

Unde greesc studenii cel mai des? Cei mai muli studeni greesc la desenarea dreptunghiurilor i elipselor n sensul c, pentru trasarea corect a acestora, trebuie inut cont de urmtoarele: precizarea coordonatelor punctului stnga-sus al dreptunghiului, respectiv al dreptunghiului circumscris elipsei, se face folosind funcia Min a clasei Math (se aplic, de exemplu, atunci cnd primul col definit cu ajutorul mouse-ului este colul dreapta-jos, iar apoi colul stnga-sus). precizarea limii i nlimii dreptunghiului se face folosind funcia Abs a clasei Math (n caz contrar putnd fi obinute segmente de dreapt de lungime negativ).

-

6

Elemente de grafic in Visual Basic.Net

Desenarea liberDesenarea liber va consta din desenarea cu ajutorul cursorului de mouse ntr-un mod similar celui n care se deseneaz pe o hrtie cu ajutorul creionului. Desenarea liber va ncepe odat cu apsarea butonului stnga al mouse-ului i se va sfri odat cu eliberarea acestuia. ntre aceste dou evenimente utilizatorul poate mica cursorul de mouse, traiectoria descris de acesta fiind afiat pe suprafaa de desenare ca o dr continu. n acest caz apare necesitatea folosirii evenimentului MouseMove (acesta apare atunci cnd deplasm cursorul de mouse deasupra unui control).

Sfaturi utile Pentru memorarea coordonatelor unui punct de pe PictureBox, utilizai un obiect de tipul Point.

Salvarea desenului ca imaginePentru salvarea coninutului suprafeei de desenare se va utiliza un obiect de tipul SaveFileDialog.Dim save As New SaveFileDialog

Cteva proprieti importante ale obiectului de tip SaveFileDialog sunt: ShowDialog lanseaz fereastra standard pentru salvarea de fisiere.If save.ShowDialog() = Windows.Forms.DialogResult.OK Then '... End If

InitialDirectory permite specificarea directorului implicit Filter permite precizarea extensiilor posibile ale fisierelor care vor fi salvate

save.InitialDirectory = "c:\" save.Filter = "JPG files (*.jpg)|*.jpg|Bitmaps (*.bmp)|*.bmp|Gif (*.gif)|*.gif"

FilterIndex folosita pentru a specifica indexul extensiei implicite din toate extensiile posibile.

save.FilterIndex = 1

Salvarea propriu-zis se face folosind metoda Save a obiectului Bitmap:myBitmap.Save(save.FileName)

ncrcarea unei imaginiPentru ncrcarea unei imagini n PictureBox se va utiliza un obiect de tipul OpenFileDialog.Dim open As New OpenFileDialog

7

Laborator 2 MTP

Cele mai importante proprieti ale unui Obiect de tipul OpenFileDialog sunt: ShowDialog, InitialDirectory, Filter, FilterIndex. Pentru a ncrca imaginea deschis n controlul PictureBox i pentru a o putea modifica ulterior, sunt necesare urmtoarele:myBitmap = System.Drawing.Image.FromFile(open.FileName) myGraphics = Graphics.FromImage(myBitmap) PictureBox1.Image = myBitmap

Inserarea de text n imagineIn continuare se dorete ca la un click de mouse pe controlul PictureBox sa se deschid o fereastr care s permit introducerea de text, precum cea de mai jos:

Figura 7. Modificarea fontului

Cnd se va apsa comanda Ok, textul introdus va aprea pe PictureBox ncepnd cu poziia n care s-a fcut click. Comanda Change Font va deschide fereastra standard de editare a fontului. Se va declara un obiect de tipul FontDialog:Dim fnt As New FontDialog

Deschiderea ferestrei de specificare a fontului se face n felul urmator:If fnt.ShowDialog() = Windows.Forms.DialogResult.OK Then '... End If

8

Elemente de grafic in Visual Basic.Net

Figura 8. Fereastra standard pentru alegerea fontului

Setarea fontului selectat se face n felul urmtor:TextBox1.Font = fnt.Font

Cu ce ne-am ales? Prin aplicaia dezvoltat n cadrul laboratorului de astzi am nvat s utilizm n scopuri grafice controlul PictureBox i evenimentele MouseDown, MoseUp i MouseMove asociate acestuia, ne-am familiarizat cu noiunea de grafic persistent utiliznd obiectele de tip Graphics i Bitmap, i am nvat s lucrm cu metodele grafice de baz.

Bibliografie [1] http://msdn.microsoft.com/en-us/vbasic/default.aspx

9