Elemente de grafic n Visual Basic

Pe parcursul acestui laborator se dorete crearea unei aplicaii simple de grafic similare Microsoft Paint. Fereastra principal a aplicaiei va cuprinde un meniu, o bar de unelte (Toolbar) i suprafaa pentru desenare n care utilizatorul va putea desena sau ncrca o imagine de tip bitmap (Fig. 1).

Fig.1. Fereastra principal a aplicaiei

Suprafaa de desenare const ntr-un control de tip PictureBox. Pentru a aduga un control de tip meniu la fereastra principal a aplicaiei de fa se va apela comanda Meniu Editor (din meniul Tools). Atenie! Comanda va putea fi accesat doar din modul de desenare a interfeei grafice (View Object din Project Explorer). Pentru a aduga un element valid de meniu este necesar ca n editorul de meniuri s se introduc valori pentru proprietile Caption (textul care va fi afiat n interfaa grafic a ferestrei) i Name (numele elementului de meniu sub care acesta va fi recunoscut n codul aplicaiei) (Fig. 2). Vor fi adugate elementele de meniul vizibile n Fig. 3.

Fig. 2. Editorul de meniuri

Fig. 3. Meniul aplicaiei

Pentru a putea desena un control de tip Toolbar se va aduga la proiectul de fa o nou component (din meniul Project comanda Components) numit Microsoft Windows Common Controls 6.0. Pentru adugarea de butoane n cadrul controlului Toolbar se va accesa butonul Insert Button din fereastra de proprieti a controlului (click dreapta > Properties) (Fig. 4).

Fig. 4. Fereastra de proprieti a controlului Toolbar

Dup cum se poate vedea n Fig. 1, fiecare buton din controlul Toobar are asociat o pictogram. Iat cum poate fi asociat o pictogram unui buton din cadrul controlului: 1. Se adaug pe fereastra aplicaiei un control de tip Image List (acesta face parte de asemenea din componenta Microsoft Windows Common Controls 6.0). Acest control poate conine o colecie de imagini care pot fi folosite de ctre alte controale Windows, de exemplu ListView, TreeView, TabStrip sau Toolbar. 2. Se acceseaz fereastra de proprieti a acestui control (click dreapta > Properties) (Fig. 5). Cu comanda Insert Picture se poate insera n cadrul coleciei controlului o imagine. Imagini standard pentru bara de unelte pot fi gsite n C:\Program Files\Microsoft Visual Studio\Common\Graphics\ Bitmaps\OffCtlBr.

Fig. 5. Fereastra de proprieti a controlului Image List

3. Din fereastra de proprieti a controlului Toolbar se seteaz proprietatea ImageList (aici va fi selectat numele controlului de tip ImageList existent n cadrul formularului) (Fig. 6). Dup aceasta, fiecrui buton din bara de unelte i se va asocia un index al unei imagini din cadrul coleciei de imagini cuprinse n controlul ImageList (proprietatea Image) (Fig. 4).

Fig. 6. Asocierea coleciei de imagini la bara de unelte

Desenarea interfeei grafice a aplicaiei fiind ncheiate, vom continua cu indicaii privitoare la codul care trebuie scris pentru ca aplicaia s funcioneze corect. Datorit faptului c desenarea va avea loc n cadrul controlului PictureBox, se vor apela metode grafice ale acestui control. Originea sistemului de coordonate asociat controlului PictureBox se afl n colul stnga-sus al acestuia. Modificarea culorii de fundal Pentru alegerea unei colori se va folosi controlul CommonDialog (se va aduga la proiect componenta Microsoft Common Dialog Control 6.0). Acest control permite afiarea de ferestre dialog standard (ex. dialogul pentru deschiderea unui fiier, pentru salvarea unui fiier, pentru alegerea unei culori, pentru alegerea unui font etc.). Metoda acestui control asociat deschiderii ferestrei dialog pentru alegerea unei culori este ShowColor. 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 setat proprietatea BackColor a controlului PictureBox. Odat setat aceast proprietate, coninutul controlului PictureBox va fi ters. Modificare culorii de desenare Pentru modificarea culorii de desenare va fi afiat fereastra de dialog pentru alegerea unei culori. Pentru modificarea culorii de fundal a suprafeei de desenare va fi setat proprietatea ForeColor a controlului PictureBox. Modificare grosimii desenului Pentru modificarea grosimii desenului (de exemplu, dimensiunea unui Pixel, sau grosimea unei linii) va fi setat proprietatea DrawWidth a controlului PictureBox. Pentru selectarea grosimii de desenare se va crea o fereastr dialog ca cea din Fig. 7.

Fig. 7 Alegerea grosimii de desenare

Curarea suprafeei de desenare Pentru tergerea coninutului suprafeei de desenare se va apela metoda Cls a controlului PictureBox. Desenarea de puncte

Utilizatorul 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. Procedura eveniment asociat acestuia va fi:
Private Sub Picture1_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)

Parametrii pe care aceast procedur i primete sunt: Button starea butoanelor mouse-ului; Shift starea tastelor SHIFT, CTRL, ALT; X coordonata X a mouse-ului (relativ la colul stnga-sus a suprafeei de desenare); Y coordonata Y a mouse-ului (relativ la colul stnga-sus a suprafeei de desenare). Pentru mai multe detalii poate fi consultat help-ul Visual Basic! Metoda grafic ce permite desenare de puncte este PSet. Desenarea de linii Utilizatorul 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. Considernd aceast modalitate de desenare a unui segment de dreapt, am fi tentai s folosim dou proceduri eveniment, MouseDown i MouseUp. Exist ns modalitatea folosirii unei singure proceduri eveniment, procedura asociat evenimentului MouseMove:
Private Sub Picture1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)

Metoda grafic ce permite desenare de linii este Line. Desenarea de dreptunghiuri Desenarea de dreptunghiuri se va efectua ntr-un mod similar celui n care se deseneaz segmente de dreapt, definindu-se astfel colul stnga-sus i colul dreaptajos al dreptunghiului. Metoda grafic ce permite desenare de dreptunghiuri este Line.
Line (X1, Y1)(X2, Y2), , BF

Ultimul parametru primit de metoda Line este folosit pentru desenarea de dreptunghiuri simple (B) sau dreptunghiuri umplute cu culoare (BF).

Desenarea de cercuri Desenarea unu cerc se va putea efectua prin precizarea centrului cercului (apsarea butonului stnga al mouse-ului) i a razei (distana dintre centrul cercului i punctul n care s-a eliberat butonul stnga al mouse-ului). Metoda grafic ce ermite desenarea de cercuri (i elipse) este Circle. Desenare liber Desenarea 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. Salvarea desenului ca imagine bitmap Pentru salvarea coninutului suprafeei de desenare se va apela metoda ShowSave a controlului CommonDialog. Se poate seta proprietatea DefaultExt a acestuia pentru salvarea fiierului cu extensia dorit. Numele fiierului ales va fi returnat de proprietatea FileName. Salvarea propriu-zis se face prin apelul funciei SavePicture:
SavePicture(Picture1.Image)

Se va studia diferena ntre Picture1.Picture i Picture1.Image. ncrcarea unei imagini de tip bitmap Pentru ncrcarea unei imagini de tip bitmap se va apela metoda ShowOpen a controlului CommonDialog. Coninutul fiierului bitmap va fi ncrcat n controlul PictureBox prin funcia LoadPicture:
Picture1.Picture = LoadPicture(nume_fisier_imagine)

Despre grafica persistent Pentru ca desenul din interiorul suprafeei de desenare s fie persistent se va seta proprietatea AutoRedraw pe valoarea True. Grafica persistent permite refacerea coninutului unui control ori de cte ori este nevoie pentru ca acesta s nu fie distrus (Fig. 8).

Fig. 8. Exemplu de grafic nepersistent

n continuare se vor implementa funciile de desenarea a unui dreptunghi, respectiv a unui cerc umplut cu culoare (alta dect cea de desenare).