Grafika, czyli GDI+ w pigułce

.NET Framework umożliwia w prosty sposób manipulowanie grafiką. Dodając do naszego projektu przestrzeń nazw System.Drawing możemy między innymi:
- rysować różne elementy graficzne (linie, koła itp.) w sposób dynamiczny
- edytować obrazy
- przycinać i powiększać zdjęcia
- malować łańcuchy znakowe (np. informacje o autorze czy znak wodny)

To oczywiście tylko niektóre z możliwości, których nam dostarcza ta biblioteka.

Przestrzeń Graphics zawiera wiele klas i struktur, które będziemy wykorzystywać podczas dalszej pracy. Na początek wymienię kilka klas, które z pewnością niejednokrotnie wykorzystamy:
Bitmap – wykorzystujemy ją podczas ładowania i zapisywania obrazów
Brush – pozwala na wypełnianie określonej przestrzeni (np. wnętrze narysowanego koła jakimś kolorem)
Brushes – jeśli nie chcemy tworzyć instancji klasy Brush, możemy skorzystać z tej klasy
Font – reprezentuje łańcuch tekstowy, pozwala na określenie atrybutów malowanego tekstu
Graphics – używamy tej klasy gdy chcemy coś namalować, dodać tekst do zdjęcia itp.
Icon – reprezentuje ikonę
Image – klasa bazowa dla klas Bitmap i Metafile
Pen – klasa reprezentująca narzędzie do malowania linii i innych kształtów graficznych
Pens – jeśli nie mamy zamiaru tworzyć instancji Pen, możemy skorzystać z tej klasy

A teraz kilka przydatnych struktur:
Color – reprezentuje kolor
Point – współrzędne X i Y punktu
PointF – współrzędne X i Y punktu (reprezentowane jako wartości float)
Rectangle i RectangleF – reprezentują prostokąt (wersja z wartościami int i float)
Size i SizeF – przechowuje wysokość i szerokość (przeważnie wykorzystywane dla prostokąta)

Z tym zestawem przydatnych klas i struktur możemy rozpocząć naszą przygodę z grafiką.

 Malowanie linii i kształtów

Aby malować po kontrolce czy też formie musimy wykonać następujące kroki:

1.       Tworzymy obiekt Graphics wywołując metodę Control.CreateGraphics()

2.       Tworzymy obiekt klasy Pen (możemy także wykorzystać tu także klasę Pens)

3.       Korzystając z metod klasy Graphics, rysujemy na naszej kontrolce

Dla przykładu namalujemy coś prostego:

Kod:

   29             using (Graphics g = this.CreateGraphics())

   30             using (Pen pen = new Pen(Color.Black, 4))

   31             {

   32                 g.Clear(this.BackColor);

   33                 g.DrawEllipse(pen, 100, 50, 200, 300);

   34                 g.DrawEllipse(pen, new Rectangle(140, 110, 30, 50));

   35                 g.DrawEllipse(pen, new Rectangle(200, 110, 30, 50));

   36                 g.FillEllipse(Brushes.Black, new Rectangle(160, 130, 10, 20));

   37                 g.FillEllipse(Brushes.Black, new Rectangle(220, 130, 10, 20));

   38                 g.DrawLine(pen, 170, 180, 140, 220);

   39                 Point[] points =

   40                 {

   41                     new Point(160, 280),

   42                     new Point(300, 300),

   43                     new Point(250,300),

   44                     new Point(260, 280)

   45                 };

   46                 g.DrawBeziers(pen, points);

   47             }

Jak widać malowanie różnych kształtów nie jest trudne :)

 Praca z obrazami

Praca z obrazami jest możliwa dzięki jednej z klas: Image, Bitmap lub Metafile. Klasa Image jest klasą abstrakcyjną i zarazem bazową dla dwóch pozostałych. Obiekt tej klasy utworzyć możemy korzystając z jednej z jej metod (np. Image.FromFile(sciezka_do_pliku)). Po utworzeniu obiektu tej klasy możemy nasz obraz zmniejszyć, zapisać w innym formacie, dodać tekst czy też znak wodny.

Klasa Bitmap, dziedzicząca po Image, rozwija wachlarz nowych możliwości pracy z obrazem. Posiada dwie właściwości, które szczególnie mogą się nam przydać przy pracy z plikami graficznymi:

GetPixel  - zwraca pojedyńczy piksel, a dokładniej obiekt typu Color, który zawieta informację na temat koloru którym został namalowany ten piksel

SetPixel – pozwala na ustawienie koloru wybranego piksela

Teraz kilka praktycznych czynności z którymi możemy się spotkać podczas pracy z plikami graficznymi:

1.       Otwieranie obrazka w PictureBox:

        private void button1_Click(object sender, EventArgs e)

        {

            OpenFileDialog openFileDialog = new OpenFileDialog();

            if (openFileDialog.ShowDialog() == DialogResult.OK)

            {

                pictureBox1.Image = Image.FromFile(openFileDialog.FileName);

            }

        }

2.       Zapisywanie do pliku:

            SaveFileDialog saveFileDialog = new SaveFileDialog();

            if (saveFileDialog.ShowDialog() == DialogResult.OK)

            {

                pictureBox1.Image.Save(saveFileDialog.FileName, ImageFormat.Png);

            }

3.       Zmniejszanie powiększanie grafiki:

            Rectangle rectangle = new Rectangle(pictureBox1.Location, new Size(100, 100));

            Graphics g = pictureBox1.CreateGraphics();

            g.Clear(pictureBox1.BackColor);

            g.DrawImage(pictureBox1.Image, rectangle);

Praca z tekstem

Aby dodać tekst do grafiki należy wykonać następujące czynności:

1.       Stworzyć obiekt Graphics

2.       Stworzyć obiekt Font

3.       Wybrać jeden z predefiniowanych pędzli (Brushes) lub stworzyć nowy (Brush)

4.       Wywołać metodę Graphics.DrawString() przekazując tekst do namalowania oraz jego położenie

Przykład umieszczenia tekstu na obrazku znajdującym się w PictureBox:

            Font newFont = new Font(new FontFamily("Arial"), 12, FontStyle.Bold);

            Graphics g = pictureBox1.CreateGraphics();

            g.DrawString("Ala ma kota", newFont, Brushes.BlueViolet, new PointF(10,10));

To tyle jeśli chodzi o podstawy GDI+. Reszta, zależy już tylko wyłączenie od naszej wyobraźni i inwencji twórczej.