Blogroll

Kamis, 11 Juni 2015

04.29    No comments


Mengenal GDI+ untuk Menggambar pada Windows Form (Part 1)

Pemrograman, Pemrograman Desktop
July 6, 2012

Apa Itu GDI+ ?

GDI+ Adalah semacam library yang diberikan oleh Microsoft dalam sistem operasi mereka (Windows XP dan Windows Server 2003) yang menyediakan cara penggambaran vector graphics 2D, gambar, dan huruf. GDI+ sendiri merupakan peningakatan dari Windows Graphics Device Interface (GDI). Bahasa mudahnya GDI memungkinkan para programmer tidak tergantung pada control ( picturebox dan sebagainya ) dalam penggambaran karena gambar dapat langsung digambarkan pada windows form dengan cara coding. GDI juga dipergunakan untuk penggambaran mouse, menu dan sebagainya sekalipun tidak secara langsung. Dan tenang saja GDI+ sangatlah sederhana.
Bagi Anda yang ingin mengetahui lebih mendalam Anda dapat menuju http://en.wikipedia.org/wiki/Graphics_Device_Interface

Mengenal Rectangle Struct

Jika sudah menyangkut penggambaran ada baiknya Anda untuk mengenal Rectangle Struct yang disediakan oleh System.Drawing. Sebab hampir semua method penggambaran mempergunakan struct ini. Rectangle seperti namanya adalah representasi dari segiempat. Struct ini memiliki 4 properti yang paling penting : x, y untuk menunjukkan posisi mereka dan width dan height untuk menunjukkan panjang dan lebar.  Rectangle Struct memiliki definisi :
?
1
Rectangle kotak = new Rectangle(int x, int y, int width, int height);
Berikut adalah contoh pendeklarasiannya :
?
1
2
3
4
5
6
7
8
9
Rectangle kotakTujuan = newRectangle(20,20,200,200);
Console.WriteLine(kotakTujuan.X); // menghasilkan X
Console.WriteLine(kotakTujuan.Y); // menghasilkan Y
Console.WriteLine(kotakTujuan.Width); // menghasilkan lebar
Console.WriteLine(kotakTujuan.Height);  // menghasilkan tinggi

Menggambar dengan GDI+

Dalam artikel kali ini penulis akan mendemokan berbagai cara yang dapat dipergunakan untuk melakukan penggambaran pada GDI+ lalu dilanjutkan dengan pembuatan animasi bola yang memantul-mantul.
Pertama-tama, seperti biasanya buat project baru

Buat Project Baru
Kemudian GDI+ harus memiliki kanvas agar dapat menggambar dengan baik. kanvas yang dimaksud di sini adalah semua control yang memiliki properti image di dalamnya. Bahkan WindowsForm dapat dipergunakan, tetapi melakukan penggambaran langsung pada windowsform tidaklah terlalu elok dan juga akan menyulitkan Anda sendiri saat posisi gambar ingin diubah. Maka dari itu penulis menggunakan pictureBox control sebagai canvas bagi GDI+.

Siapkan Sebuah PictureBox
Sekarang ubah kode program Anda dengan cara klik kanan > View Code  menjadi seperti di bawah ini.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
namespace cobaGDI
{
publicpartialclassForm1 : Form
    {
Graphics g; // ini adalah object yang akan menjadi ' pelukis '
public Form1()
        {
            InitializeComponent();
// assing pictureBox1.image dengan gamabar bitmap kosong sebesar picturebox width dan height
            pictureBox1.Image = newBitmap(pictureBox1.Width, pictureBox1.Height);
// assign g dengan instance Graphics yang dibuat dari gambar bitmap tadi
            g = Graphics.FromImage(pictureBox1.Image);
// gambar sebuah kotak merah di posisi x = 20 y = 20 dan lebar = 30 panjang = 30
            g.DrawRectangle(Pens.Red, 20, 20, 30, 30);
// fill kotak merah tadi dengan warna kuning misalnya,
            g.FillRectangle(Brushes.Yellow, 21, 21, 29, 29);
        }
    }
}
Dalam kode di atas menjelaskan bahwa sebenarnya semua fungsi GDI+ sudah terenkapsulasi dalam class Graphics. Anda hanya perlu mempelajari berbagai method dalam kelas itu untuk dapat menggunakan GDI+ library.
Sekarang tekan F5 dan jika berhasil anda akan tampak seperti gambar di bawah :

Custom Color

Dalam potongan di atas penulis menggunakan enumerasi (Pens dan Brushes class) yang sudah disediakan oleh Net Framework yang berisi berbagai warna default. Pens Enumeration Class seperti namanya berguna untuk mewarnai garis, semua method penggambaran yang melibatkan garis atau draw pasti melibatkan Pen Class dan yang sama juga terjadi bagi Brush yang berguna sebagai pewarna yang melibatkan isi atau fill. Jika Anda ingin menggunakan warna sendiri, maka Anda harus menggunakan instance dari class Pen dan SolidBrush seperti contoh di bawah :
Sekarang klik F5 dan lihat perbedaannya.


Tampilan dengan Warna Baru

Gradasi Warna

Sekarang saatnya untuk mengubah warna solid di atas menjadi lebih sedikit indah dengan gradasi. Untuk dapat menampilkan gradasi Anda dapat menggunakan class ColorBlend. Namun, Untuk dapat mempergunakan class ColorBlend Anda harus memasukkan System.Drawing. Drawing2D karena class tersebut berada di sana dengan perintah
?
1
using System.Drawing.Drawing2D;
Dan dalam contoh kali ini Penulis menggunakan perintah untuk dapat melakukan penggambaran dengan lingkaran dengan method FillEllipse. FillEllipse memiliki definisi sebagai berikut :
?
1
g.FillEllipse(Brush kuas, Rectangle kotak);
Kotak yang dimaksud di sini adalah kotak yang tepat menutupi lingkaran, anggap seperti gambar di bawah ini :

Property x, y Width dan Height Terenkapsulasi dalam Rectangle kotak
Selanjutnya ubahlah source code yang tadi Anda buat sebelumnya menjadi tepat seperti potongan kode di bawah :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Drawing.Drawing2D;
namespace cobaGDI
{
publicpartialclassForm1 : Form
    {
Graphics g; // ini adalah object yang akan menjadi ' pelukis '
Pen pena;
SolidBrush kuas;
public Form1()
        {
            InitializeComponent();
      // assign pictureBox1.image dengan gamabar bitmap kosong sebesar
      // picturebox width dan height
      pictureBox1.Image = newBitmap(pictureBox1.Width,
      pictureBox1.Height);
            // assign g dengan instance Graphics yang dibuat dari gambar
            // bitmap tadi
            g = Graphics.FromImage(pictureBox1.Image);
// color blend akan berisi campuran berbagai warna
ColorBlend gradasi = newColorBlend();
// tentukan prosentase posisi warna pada kuas
            gradasi.Positions = newfloat[] {0.0f, 0.25f, 0.5f, 0.75f, 1.0f};
// tentukan berbagai warna yang akan ditampilkan
            gradasi.Colors = newColor[] {
Color.AliceBlue,
Color.Aqua,
Color.DarkRed,
Color.FloralWhite,
Color.LightGreen
            };
            // buat sebuah kotak dengan posisi x,y = 10,10 dan besar 300px
            // dan 300px
Rectangle kotak = newRectangle(10, 10, 300, 300);
// buat sebuah kuas beri warna sesuka anda pada kuas itu karena
            // nanti akan diganti, dan sudut 0 derajat (tegak lurus dalam C#)
            LinearGradientBrush kuasGradasi = newLinearGradientBrush(kotak,
Color.Red, Color.Blue, 0f);
            // masukkan warna tadi ke dalam kuas
            kuasGradasi.InterpolationColors = gradasi;
// gambar sebuah lingkaran ( ellipse ) dengan besar sesuai dengan
            // rectangle di atas
            g.FillEllipse(kuasGradasi, kotak);
          }
       }
}
Jika benar, maka tekan F5 dan seharusnya akan tampil tampilan seperti gambar di bawah :

Garis

Seperti yang Anda duga dari pengalaman dengan method penggambaran lainnya, untuk penggambaran garis diperlukan method drawLine() yang dapat dipanggil dengan cara sama seperti FillEllipse() dalam contoh kode sebelumnya.
Perintah detail :
?
1
Void DrawLine(Pen pena, Point titikAwal, Point titikAkhir);
atau
?
1
Void DrawLine(Pen pena, int x1, int y1, int x2, int y2);
Sebagai Contoh :
?
1
2
3
g.DrawLine(Pens.Blue, 90, 90, 150, 30); // artinya menggambar garis dari
// posisi x=90 y=90 ke posisi x=150, y=30

Texts

GDI+ juga dapat dipergunakan untuk menggambar huruf langsung pada windows form atau kontrol lainnya dengan sedikit bantuan dari class Font dan FontFamily. Sama seperti method penggambaran lain sebelumnya, penggambaran text juga dapat memiliki banyak bentuk (overloading). Beberapa yang tercantum dalam contoh di bawah adalah :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
g.DrawString(String kalimat,Font huruf, Brush kuas, PointF posisiText);
g.DrawString(String kalimat,Font huruf, Brush kuas, PointF posisiText,StringFormat format);
g.DrawString(String kalimat, Font huruf, Brush kuas, int x, int y);
berikut adalah contoh potongan kode untuk menggambar string :
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Drawing.Drawing2D;
namespace cobaGDI
{
publicpartialclassForm1 : Form
    {
Graphics g; // ini adalah object yang akan menjadi ' pelukis '
public Form1()
        {
            InitializeComponent();
// assing pictureBox1.image dengan gamabar bitmap kosong sebesar picturebox width dan height
            pictureBox1.Image = newBitmap(pictureBox1.Width, pictureBox1.Height);
// assign g dengan instance Graphics yang dibuat dari gambar bitmap tadi
            g = Graphics.FromImage(pictureBox1.Image);
// fontFamily untuk memberitahukan jenis huruf yang dipergunakan
FontFamily fontFamily = newFontFamily("Times New Roman");
// huruf dipakai untuk memberitahukan jenis dan besar huruf yang akan dipakai
Font huruf = newFont(fontFamily,22.0f);
// tentukan letak text
PointF posisiText = newPointF(20,20);
// gambarkan string dengan DrawString
            g.DrawString("Lorem Ipsum Dolor Sit Amet", huruf, Brushes.Black, posisiText);
// tentukan posisi text
            posisiText = newPointF(20, 50);
// string format akan dipergunakan untuk membuat direksi dari string vertikal
StringFormat format = newStringFormat();
            format.FormatFlags = StringFormatFlags.DirectionVertical;
// gambarkan string
            g.DrawString("Lorem Ipsum Dolor Sit Amet", huruf, Brushes.Black,posisiText,format);
// secara default string direction adalah mendatar,
// gunakan font yang dipakai olejh windows form melalui property Font dan gambarkan
            g.DrawString("Lorem Ipsum Dolor Sit Amet", this.Font, Brushes.Red, 70, 120);
      }
      }
}
Tekan F5 dan jika benar maka akan muncul tampilan  seperti gambar di bawah :

Menggambar Image

Untuk penggambaran image dengan GDI+ dipergunakan method drawImage() dari Graphics class. DrawImage() memiliki definisi sebagai berikut :
?
1
g.DrawImage(Image gambar, Rectangle kotak);
atau
?
1
g.DrawImage(Image gambar, Rectangle kotakTujuan, Rectangle kotakSource, GraphicsUnit);

  1. Kotak adalah instance dari Rectangle yang bertujuan menentukan letak dan besar gambar pada layar gambar dalam contoh adalah picturebox. Sama dengan kotakTujuan di alternatif di syntax kedua
  2. KotakSource bertujuan menentukan letak dan besar dari gambar yang akan di tampilkan dari gambar sumber yang ada. Jadi jika pada bagian ini dipergunakan rectangle dengan x = 0 , y = 0 dan width = 200 , height  =  200 dan ukuran gambar sebenarnya adalah 1024×768 maka hanya bagian pojok kiri atas dengan ukuran 200×200 pixel saja yang akan diambil dari keseluruhan gambar.
  3. Jika Anda menggunakan definisi yang pertama maka keseluruhan gambar akan diambil dan kemudian diletakkan pada kanvas dengan besar tertentu. Sementara jika Anda memilih untuk menggunakan definisi yang kedua maka gambar dapat tidak diambil sepenuhnya

Untuk dapat menampilkan gambar Anda juga memerlukan class Image. Class Image akan secara otomatis mencari dan meload gambar ke dalam memory jika baris berikut muncul. Gambar yang akan diambil bernama gambar.jpg dan berada satu folder dengan file executable yang dihasilkan di folder bin\Debug
?
1
Image gambar = Image.FromFile("gambar.jpg");
Sekarang penulis akan mencoba mendemonstrasikan penampilan gambar dengan GDI+. Untuk itu pilih sebuah gambar sembarang rename untuk mempermudah pemanggilan nantinya. Dalam contoh ini penulis merename file menjadi gambar.jpg dan simpan ke dalam folder debug\bin yang terdapat dalam folder project Visual Studio anda. Biasanya terletak di C:\Users\<nama user>\Documents\Visual Studio 2008\Projects\<nama project>\<nama project>\bin\Debug

Taruh File Bersama dengan File Exe dalam Folder Debug
Kemudian ubah kode Anda menjadi 2 contoh berikut . Berikut adalah 2 potongan kode yang menunjukkan perbedaan antara kedua method
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Drawing.Drawing2D;
namespace cobaGDI
{
publicpartialclassForm1 : Form
    {
Graphics g; // ini adalah object yang akan menjadi ' pelukis '
public Form1()
        {
            InitializeComponent();
// assing pictureBox1.image dengan gamabar bitmap kosong sebesar picturebox width dan height
            pictureBox1.Image = newBitmap(pictureBox1.Width, pictureBox1.Height);
// assign g dengan instance Graphics yang dibuat dari gambar bitmap tadi
            g = Graphics.FromImage(pictureBox1.Image);
Image gambar = Image.FromFile("gambar.jpg");
Rectangle kotakTujuan = newRectangle(20,20,200,200);
            g.DrawImage(gambar, kotakTujuan);
     }
}
}
Hasil :

Hasil Potongan Kode Pertama
Berikut adalah potongan kode kedua yang akan mengambil sebagian saja dari keseluruhan gambar :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Drawing.Drawing2D;
namespace cobaGDI
{
publicpartialclassForm1 : Form
    {
Graphics g; // ini adalah object yang akan menjadi ' pelukis '
public Form1()
        {
            InitializeComponent();
// assing pictureBox1.image dengan gamabar bitmap kosong sebesar picturebox width dan height
            pictureBox1.Image = newBitmap(pictureBox1.Width, pictureBox1.Height);
// assign g dengan instance Graphics yang dibuat dari gambar bitmap tadi
            g = Graphics.FromImage(pictureBox1.Image);
Image gambar = Image.FromFile("gambar.jpg");
Rectangle kotakTujuan = newRectangle(20,20,200,200);
Rectangle kotakSource = newRectangle(0,0,500,500);
            g.DrawImage(gambar, kotakTujuan,kotakSource,GraphicsUnit.Pixel);
         }
}
}
Hasil :

Hasil Tampilan Kedua Menunjukkan Perbedaan dengan Pertama

Kesimpulan

Penggambaran di GDI+ sebenarnya sangat mudah dan sederhana. Dengan satu class (Graphics) yang bertanggungjawab atas semua prosedur penggambaran dengan GDI+. Dalam artikel selanjutnya penulis akan membahas mengenai  animasi gambar bergerak dengan GDI+.

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)