Laboratorul 2 Elemente de grafic n Visual C#

Ce ne propunem astzi? n aceast lucrare de laborator ne propunem s realizm o aplicaie simpl de grafic, similar Microsoft Paint, urmrind familiarizarea cu noiunea de grafic persistent precum i cu principalele metodele grafice.

Pentru proiectarea ferestrei principale a aplicaiei (vezi Figura 1) se va utiliza un meniu (control MenuStrip), o bar de unelte (control ToolStrip), iar suprafaa pentru desenare va fi un control PictureBox n care utilizatorul va putea desena sau ncrca o imagine de tip bitmap.

Figura 1. Fereastra principal a aplicaiei

Mai pe larg, vom proceda astfel:

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).

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).

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 indic textul care apare atunci cnd cursorul de mouse este

poziionat deasupra butonului. n continuare se seteaz proprietatea DisplayStyle la valoarea ImageAndText, iar proprietatea TextImageRelation la valoarea ImageAboveText.
2

Elemente de grafic n Visual C#

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 PictureBox:
Graphics myGraphics = 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.
Bitmap myBitmap;

n mod uzual, controalele PictureBox sunt folosite pentru afiarea coninutului unor fiiere grafice, iar obiectele de tip Bitmap sunt 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.). 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:
//constructorul clasei Form1... //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 fundal

Pentru alegerea unei colori se va folosi un obiect de tip ColorDialog. Acesta permite afiarea unei ferestre de dialog standard pentru alegerea unei culori. Pentru afiarea dialogului trebuie apelat metoda ShowDialog. Fereastra de dialog va fi afiat modal, iar culoarea aleas va fi returnat de ctre proprietatea Color. O fereastr dialog modal l oblig pe utilizator s furnizeze informaiile cerute sau s nchid fereastra dialog nainte de a-i permite aplicaiei s continue. Dac metoda ShowDialog va returna constanta DialogResult.OK, atunci utilizatorul a nchis fereastra de la butonul OK i, deci, avem acces la culoarea selectat.

Laborator 2 - MTP

Figura 5. Fereastra standard pentru alegerea culorii

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.
myGraphics.Clear(colorDialog1.Color); pictureBox1.Image = myBitmap;

Modificarea culorii de desenare i a grosimii desenului

Culoarea de desenare va fi aleas folosind un obiect de tip ColorDialog. Pentru specificarea culorii de desenare precum i a grosimii liniilor desenului este necesar utilizarea unui obiect de tipul Pen.
//exemplu de creare a unui creion de culoare albastra i grosime 2 pixeli. Pen myPen = new Pen(Color.Blue, 2);

Pentru modificarea grosimii desenului vei crea i afia o fereastr precum cea din Figura 6. 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.

Figura 6. Alegerea grosimii de desenare

Att butonul OK ct i butonul Cancel vor avea ca efect final nchiderea ferestrei. Diferena dintre ele const din ceea ce va returna metoda ShowDialog a ferestrei n cauz. La apsarea butonului OK proprietatea DialogResult a formularului va primi valoarea DialogResult.OK, iar la apsarea butonului Cancel valoarea DialogResult.Cancel. Pentru a putea indica, n cadrul unei ferestre, care s fie butoanele OK i Cancel trebuie s setai dou dintre proprietile ferestrei: AcceptButton i CancelButton, apoi proprietatea DialogResult pentru ambele butoane.

Elemente de grafic n Visual C#

Fereastra va afia n controlul NumericUpDown valoarea curent a grosimii de desenare, iar la nchiderea cu ajutorul butonului OK grosimea de desenare va lua valoarea nscris n controlul NumericUpDown. Pentru a putea avea acces la valoarea din acest control este nevoie s implementai n clasa Form2 o proprietate public:
public float DrawWidth { get {//... } set {//... } }

Pentru apelarea din cod a ferestrei din Figura 6 se va utiliza urmtoarea secven de cod:
Form2 f = new Form2(); //afisarea grosimii curente de desenare in controlul NumericUpDown f.DrawWidth = myPen.Width; if ((f.ShowDialog() == DialogResult.OK)) { //modificarea grosimii de desenare }

Metoda ShowDialog va returna o constant care corespunde butonului apsat de utilizator (n cazul nostru, OK sau Cancel). Acum totul este pregtit pentru a ncepe s implementai operaiile de desenare a primitivelor grafice. Pentru a cunoate n orice moment care este primitiva grafic selectat (punct, linie, dreptunghi, elips sau desenare liber) recomandm memorarea acesteia ntr-o variabil local clasei Form1. Ne va fi util n acest sens declararea unei enumerri n spaiul de nume al aplicaiei:
public enum DrawMode { Pixel, Line, Rectangle, FilledRectangle, Ellipse, FilledElipse, Frehand } //0 //1 //2 //3 //4 //5 //6

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. n Visual Studio .NET nu exista o metod dedicat pentru desenarea de puncte. Pentru a desena un pixel se va trasa, de exemplu, o elips cu limea i nlimea de un pixel.
myGraphics.DrawEllipse(myPen, x, y, 1, 1); pictureBox1.Image = myBitmap;

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. Metoda grafic cu ajutorul creia se deseneaz segmente de dreapt este DrawLine.

Laborator 2 - MTP

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).

Vei avea nevoie s aflai locaia exact unde utilizatorul a apsat sau a eliberat butonul de mouse, dar i ce buton de mouse a fost apsat sau eliberat. Toate aceste date v sunt oferite de parametrul e al procedurii eveniment.
private void pictureBox1_MouseUp(object sender, MouseEventArgs e) { //... }

Desenarea de dreptunghiuri
Desenarea unui dreptunghi se va efectua preciznd coordonatele coltului stnga-sus (definit la apsarea butonului stnga al mouse-ului) al dreptunghiului, a limii i nlimii lui. Metoda grafic ce permite desenare de dreptunghiuri este DrawRectangle.

Desenarea de elipse
Desenarea unei elipse se va putea efectua prin precizarea colului stnga-sus (definit la 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 va face folosind funcia Math.Min (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 Math.Abs (n caz contrar putnd fi obinute segmente de dreapt de lungime negativ).

Desenarea 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. n acest caz apare necesitatea folosirii evenimentului MouseMove (acesta se declaneaz atunci cnd deplasm cursorul de mouse deasupra unui control).

Elemente de grafic n Visual C#

Sfaturi utile Pentru memorarea coordonatelor unui punct de pe PictureBox putei utiliza un obiect de tipul Point.

Salvarea desenului ca imagine

Pentru salvarea coninutului suprafeei de desenare se va utiliza un obiect de tipul SaveFileDialog.
SaveFileDialog dlg = new SaveFileDialog();

Cteva proprieti importante ale obiectelor de tip SaveFileDialog sunt:

ShowDialog lanseaz fereastra standard pentru salvarea de fiiere.
if ((dlg.ShowDialog() == DialogResult.OK)) { // }

InitialDirectory permite specificarea directorului implicit

dlg.InitialDirectory = Application.StartupPath;

Filter permite precizarea extensiilor posibile ale fiierelor care vor fi salvate
dlg.Filter = "Jpeg (*.jpg)|*.jpg|Bitmap (*.bmp)|*.bmp";

FilterIndex folosit[ pentru a specifica indexul extensiei implicite din setul tuturor

extensiilor posibile.
dlg.FilterIndex = 1;

Salvarea propriu-zis se face folosind metoda Save a obiectului Bitmap:

myBitmap.Save(dlg.FileName);

ncrcarea unei imagini

Pentru ncrcarea unei imagini n PictureBox se va utiliza un obiect de tipul OpenFileDialog.
OpenFileDialog dlg = new OpenFileDialog();

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 = (Bitmap)System.Drawing.Image.FromFile(dlg.FileName); myGraphics = Graphics.FromImage(myBitmap); pictureBox1.Image = myBitmap;

Inserarea de text n imagine

In continuare se dorete ca la un click de mouse pe controlul PictureBox s se deschid o fereastr care s permit introducerea de text, precum cea din Figura 7.

Laborator 2 - MTP

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, apoi se va deschide fereastra pentru selectarea caracteristicilor fontului (vezi Figura 8):
FontDialog dlg = new FontDialog();

Figura 8. Fereastra standard pentru alegerea fontului

Setarea fontului selectat se face n felul urmtor:

textBox1.Font = dlg.Font;

Evident, la fel ca n cazul ferestrei dialog pentru selectarea grosimii de desenare, i n clasa ferestrei acesteia vor trebui definite dou proprieti publice: una pentru accesarea textului introdus n caseta de tip TextBox i alta pentru accesarea caracteristicilor fontului selectat. Scrierea textului pe suprafaa de desenare se face cu metoda DrawString a obiectului myGraphics.
Cu ce ne-am ales? Prin aplicaia dezvoltat n cadrul acestei lucrri 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.

Elemente de grafic n Visual C#

Bibliografie [1] Visual C# Resources, http://msdn.microsoft.com/enus/vstudio/hh341490%28v=msdn.10%29.aspx [2] John Sharp, Microsoft Visual C# 2010 Step by Step, http://blogs.msdn.com/b/microsoft_press/archive/2010/03/30/new-bookmicrosoft-visual-c-2010-step-by-step.aspx