Apa itu GDI+?

GDI+ adalah library pada .NET yang digunakan untuk membuat aplikasi grafis berbasis Windows dan Web yang dapat berinteraksi dengan perangkat grafis berupa printer atau monitor.

Graphical User Interface (GUI) berinteraksi dengan perangkat hardware seperti monitor, printer, atau scanner untuk menampilkan format yang dapat dibaca oleh manusia, tetapi tidak ada program yang dapat mengakses perangkat hardware tersebut secara langsung, maka dibuat user interface agar pengguna dapat berinteraksi dengan perangkat-perangkat tersebut.

Untuk membuat user interface tersebut harus digunakan third component sebagai jembatan antara program dan perangkat keras, maka dibuatlah komponen GDI+ library, dengan komponen tersebut anda dapat menampilkan output berupa text dan gambar ke perangkat hardware.

Pada aplikasi .NET anda dapat menggunakan GDI+ untuk membuat aplikasi grafis baik untuk aplikasi berbasi windows maupun aplikasi web. Library GDI+ sudah tersinstall secara default pada sistem operasi Windows XP, Vista, dan Windows 2003 yang berlokasi di class library dengan nama Gdiplus.dll. Gdiplus.dll.

Apa saja fitur GDI+?

Fitur GDI+ dapat kategorikan dalam 3 fungsi utama yaitu:

• 2D vector graphic
• Imaging
• Typograhy

2D Vector Graphics Programming

Vector Graphic merupakan komponen pembentuk bentuk gambar mis (kotak, lingkaran) yang dibentuk dari kumpulan titik pada sistem koordinat.

Pada .NET Framework library 2D vector graphic programming dibagi menjadi dua kategori yaitu general dan advanced. General 2D vector graphic didefinisikan dalam library System.Drawing namespace dan advance function didefinisikan dalam library System.Drawing.Drawing2D namespace.

Imaging

Imaging digunakan untuk memanipulasi image. Image file yang dapat dimanipulasi misalnya .bmp, .jpg, .gif, dan .png. Fungsi-fungsi untuk memanipulasi images ada dalam Image class yang digunakan untuk create, save, dan load images.

Typography

Typography digunakan untuk mendesign dan merepresentasikan text. GDI+ menyediakan class untuk membuat dan menggunakan font.

GDI+ Namespaces dan Class dalam .NET

Area Drawing

Setiap aplikasi drawing paling tidak terdiri dari tiga komponen yaitu canvas, brush, pen, dan process

• Canvas: adalah area dimana object akan digambar, misal pada aplikasi Windows, Windows Form adalah canvasnya.
• Brush atau Pen merepresentasikan tekstur, warna, dan ukuran dari objek yang akan digambar pada canvas.
• Process mendifinisikan bagaimana object tersebut akan digambar kedalam canvas.

Setiap area drawing memiliki empat property utama yaitu: weight, height, resolution dan color depth.

• Width dan height property digunakan untuk medeskripsikan ukuran area drawing secara vertikal dan horizontal
• Resolution adalah satuan untuk mengukur output quality dari graphic object atau images dalam satuan dot per inch (dpi). Sebagai contoh resolusi 72 dpi berarti 1 inch dari area tersebut terdiri dari 72 horizontal dan 72 vertical pixel. Untuk monitor resolusi 1280×1024 berarti pada area monitor tersebut terdiri dari 1280 horizontal pixel dan 1024 vertical pixel.
• Color depth adalah jumlah warna yang digunakan untuk merepresentasikan setiap pixel.

Definisi dari pixel adalah: elemen terkecil pada proses drawing untuk menampilkan graphic object atau images pada layar. Pixel density sering direpresentasikan dengan nilai dpi (dot per inch).

Struktur color pada GDI+ mempunyai empat komponen warna yaitu: alpha, red, green, dan blue. Red green blue (RGB) komponen mewakili kombinasi warna yang akan muncul. Setiap komponen dalam RGB mempunyai 256 (28) color combination, sehingga kombinasi tiga komponen RGB tersebut mempunyai kemungkinan warna 256x256x256. Alpha komponen mewakili aspek transparan dari warna, yang akan terlihat ketika beberapa warna digabungkan.

Seperti yang terlihat pada gambar diatas, area drawing paling tidak harus mensupport 24-bit color system (8-bit untuk setiap R, G, dan B komponen).

Sistem Koordinat

Memahami sistem koordinat sangat penting untuk pemrograman graphic, sistem koordinat merepresentasikan letak graphic objet pada perangkat tampilan seperti monitor dan printer.

Sistem Koordinat Kartesian

Ini adalah koordinat umum yang anda pelajari pada pelajaran matematika dasar, terdiri dari sumbu x dan y

Posisi sitem koordinat kartesian dibagi menjadi beberapa kuadran:

• Kuadran I: x > 0 dan y > 0
• Kuadran II: x < 0 dan y > 0
• Kuadran III: x < 0 dan y < 0
• Kuadran IV: x > 0 dan y < 0

Sistem Koordinat Standar GDI+

Tidak seperti sistem kartesian, pada perangkat tampilan seperti monitor sumbu (0,0) terletak pada pojok kiri atas.

Aplikasi Pertama menggunakan GDI+

Sekarang saatnya anda untuk mencoba membuat aplikasi menggunakan library GDI+ menggunakan .NET Framework.

1. Pertama buat aplikasi windows form baru pada visual studio, beri nama projectnya contoh2_1

2. Untuk menggunakan GDI+ maka anda harus menambahkan referensi library kedalam program

using System.Drawing;
using System.Drawing.Drawing2D;

3. Untuk menggambar di form anda dapat menambahkan kode dalam method OnPaint.

private void Form1_Paint(object sender, PaintEventArgs e)
{
   //membuat instan class / objek dari class graphic
   Graphics g = e.Graphics;
} 

4. Untuk menambahkan object Pen, Brush, serta Drawing Shape kedalam form tambahkan kode sebagai berikut

private void Form1_Paint(object sender, PaintEventArgs e)
{
            //membuat instan class / objek dari class graphic
            Graphics g = e.Graphics;
            //set smothing mode pada area drawing
            g.SmoothingMode = SmoothingMode.AntiAlias;
            //membuat kotak dengan width 100 dan height 100
            Rectangle rect = new Rectangle(20, 20, 100, 100);
            //membuat objek pen berwarna merah
            Pen redPen = new Pen(Color.Red, 3);
            Pen blackPen = Pens.Black;
            //membuat objek solid brush
            SolidBrush greenBrush = new SolidBrush(Color.Green);
            
            //menggambar shape dan line
            g.DrawRectangle(redPen, rect);
            g.FillEllipse(greenBrush, rect);
            g.DrawLine(blackPen, 0, 250, this.Width, 250);
            g.FillEllipse(Brushes.Blue, 70, 220, 30, 30);
            g.FillEllipse(Brushes.SkyBlue, 100, 210, 40, 40);
            g.FillEllipse(Brushes.Green, 140, 200, 50, 50);
            g.FillEllipse(Brushes.Yellow, 190, 190, 60, 60);
            g.FillEllipse(Brushes.Violet, 250, 180, 70, 70);
            g.FillEllipse(Brushes.Red, 320, 170, 80, 80);
}

5.Jalankan program dengan menekan tombol F5 untuk melihat hasilnya.

Menggunakan Struktur Point dan PointF

Pada GDI+ point digunakan untuk mendefinisikan koordinat titik dua dimensi yang direpresentasikan sebagai matrix (x dan y koordinat) . ada tiga macam konstruktor yang dapat digunakan untuk membuat object point yaitu:

Point pt1 = new Point(10);
Point pt2 = new Point( new Size(20, 20) );
Point pt3 = new Point(30, 30);

Struktur PointF hampir sama dengan Point hanya saja nilai sumbu x dan y-nya tidak berupa integer melainkan floating point.

PointF pt3 = new PointF(30.0f, 30.0f);

Contoh 2_2 Penggunaan Struktur Point

private void Form1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;

            //membuat object point
            Point pt = new Point(50, 50);
            //membuat object point kosong
            Point newPoint = Point.Empty;
            newPoint.X = 100;
            newPoint.Y = 200;

            Pen pn = new Pen(Color.Blue, 4);
           
            //menggambar garis dari titik pt ke newPoint
            g.DrawLine(pn, pt, newPoint);

            pn.Dispose();
            g.Dispose();
        }

Menggunakan Struktur Rectangle

Struktur rectangle digunakan untuk membuat object rectangle di GDI+

Contoh2_3 Penggunaan Struktur Rectangle

private void Form1_Paint(object sender, PaintEventArgs e)
        {
            // Create a Graphics object
            Graphics g = this.CreateGraphics();
            int x = 40;
            int y = 40;
            int height = 120;
            int width = 120;
            // Create a Point object
            Point pt = new Point(80, 80);
            // Create a Size object
            Size sz = new Size(100, 100);
            // Create a rectangle from Point and Size
            Rectangle rect1 = new Rectangle(pt, sz);
            // Create a rectangle from integers
            Rectangle rect2 =
                new Rectangle(x, y, width, height);
            // Create a rectangle from direct integers
            Rectangle rect3 =
                new Rectangle(10, 10, 180, 180);
            // Create pens and brushes
            Pen redPen = new Pen(Color.Red, 2);
            SolidBrush greenBrush =
                new SolidBrush(Color.Blue);
            SolidBrush blueBrush =
                new SolidBrush(Color.Green);
            // Draw and fill rectangles
            g.DrawRectangle(redPen, rect3);
            g.FillRectangle(blueBrush, rect2);
            g.FillRectangle(greenBrush, rect1);
            // Dispose of the objects
            redPen.Dispose();
            blueBrush.Dispose();
            greenBrush.Dispose();
            g.Dispose();
        }

bersambung Part 2…