Actual Training

Membuat Paint App dengan C# dan GDI+ (Part 1)

Sesudah anda membaca tutorial saya yang sebelumnya tentang pemrograman GDI+ dengan C# Part 1 dan 2 maka pada kesempatan ini saya akan melanjutkannya dengan membuat sebuah contoh yang simple agar penerapan GDI+ menjadi lebih mudah untuk dimengerti

Pada tutorial kali ini saya akan mengajak anda untuk mencoba beberapa fitur yang ditawarkan oleh library GDI+ dan C# untuk membuat sebuah aplikasi pengolah citra yang sederhana (mirip aplikasi paint). Aplikasi ini juga saya gunakan sebagai tugas untuk mahasiswa yang mengambil matakuliah komputer grafis.

Untuk membuat aplikasi ini pertama-tama anda harus membuat design form sebagai berikut:

image 

kemudian deklarasikan beberapa variabel yang akan digunakan pada aplikasi ini

private Bitmap bitmap = null;
private Bitmap curBitmap = null;
private bool dragMode = false;
private bool boolFill = false;
private int drawIndex = 1;
private int curX, curY, x, y;
private int diffX, diffY;
private Graphics curGraphics;
public Pen curPen;
private SolidBrush curBrush;
private Size fullSize;

private Color borderColor = Color.Black;
private Color fillColor = Color.White;

private Image currImage = null;
private string currFilename = "";

pada saat form di load buat object Bitmap dan Graphic sebagai berikut, 

private void Form1_Load(object sender, EventArgs e)
{
    //cek ukuran display monitor
    fullSize = SystemInformation.PrimaryMonitorMaximizedWindowSize;
    //buat object bitmap baru
    bitmap = new Bitmap(fullSize.Width,fullSize.Height);
    //buat object graphic baru
    curGraphics = Graphics.FromImage(bitmap);
    curPen = new Pen(Color.Black);
    curBrush = new SolidBrush(Color.Black);
}

pada saat event MouseDown pada form simpan titik (x,y)

private void Form1_MouseDown(object sender, MouseEventArgs e)
{
    curX = e.X;
    curY = e.Y;
    dragMode = true;
}

pada saat event MouseMove, hitung height dan width dari titik awak ke titik akhir

private void Form1_MouseMove(object sender, MouseEventArgs e)
{
    x = e.X;
    y = e.Y;
    //hitung beda antara titik awal dan akhir(pada saat move)
    diffX = e.X - curX;
    diffY = e.Y - curY;

    if (dragMode)
    {
        this.Refresh();
    }
}

Pada saat event MouseUp gambar dulu objectnya (rectangle, pen, atau, ellipse). Penggambaran object ini bukan di form melainkan pada object Graphic yang akan digunakan sebagai background agar setelah digambar object gambar yang lama tidak hilang.

private void Form1_MouseUp(object sender, MouseEventArgs e)
{
    diffX = x - curX;
    diffY = y - curY;

    switch (drawIndex)
    {
        case 1:
            //gambar garis
            curGraphics.DrawLine(curPen, curX, curY, x, y);
            break;
        case 2:
            //gambar ellipse
                curGraphics.DrawEllipse(curPen, curX, curY, diffX, diffY);
            break;
        case 3:
            //gambar kotak
                curGraphics.DrawRectangle(curPen, curX, curY, diffX, diffY);
            break;
    }

    RefreshFormBackground();
    dragMode = false;
}

Pada event Paint di form gambar objecnya

private void Form1_Paint(object sender, PaintEventArgs e)
{
    Graphics g = e.Graphics;
   
    if (currImage != null)
    {
        g.DrawImage(currImage, AutoScrollPosition.X, AutoScrollPosition.Y+pnlMenu.Height, currImage.Width, currImage.Height);
        curGraphics.DrawImage(currImage, AutoScrollPosition.X, AutoScrollPosition.Y+pnlMenu.Height, currImage.Width, currImage.Height);
        RefreshFormBackground();
        currImage = null;
    }

    if (dragMode)
    {
        switch (drawIndex)
        {
            case 1:
                //gambar garis
                g.DrawLine(curPen, curX, curY, x, y);
                break;
            case 2:
                //gambar ellipse
                    g.DrawEllipse(curPen, curX, curY, diffX, diffY);
                break;
            case 3:
                //gambar kotak
                    g.DrawRectangle(curPen, curX, curY, diffX, diffY);
                break;
        }
    }
}

method RefreshFormBackground() digunakan untuk menjadikan object curGraphic sebagai background form

private void RefreshFormBackground()
{
    curBitmap = bitmap.Clone(new Rectangle(0, 0, this.Width, this.Height), bitmap.PixelFormat);
    this.BackgroundImage = curBitmap;
}

setelah itu coba anda jalankan programnya dan mencoba menggambar object line atau rectangle sebagai berikut

image

untuk menambahkan pewarnaan fiil, border, open, dan save file akan dibahas di artikel selanjutnya, selamat mencoba

have fun guys.. coding is fun :)

Posted in C#Tagged , , , , 33 Comments

33 thoughts on “Membuat Paint App dengan C# dan GDI+ (Part 1)”

  1. Halo, salam kenal nama saya naser. saya baru aja belajar c#. niatnya sekaligus untuk mengerjakan tugas akhir, karena tugas akhir saya berkaitan dengan pengolahan citra. sebelumnya saya menggunakan visual basic .NET. tetapi setelah mencoba C# sepertinya ini lebih enak dan lebih banyak referensinya. Terima kasih untuk contohnya….

    Reply

  2. salam kenal juga mas naser, senang bisa membantu, yup sebenernya pake c# dan vb.net itu sama saja kok cm masalah selera saja, seperti memilih ice cream suka yg vanilla atau yg coklat, karena pada dasarnya semua component yang digunakan sama yaitu .NET Framework, cuman untuk aplikasi berbasis windows vb.net emang didesain lebih mudah digunakan dan tidak strict seperti c#

    Reply

  3. halo,
    ada beberapa hal yang ingin saya tanyakan mengenai aplikasi ini.
    1. variabel drawIndex digunakan untuk apa?
    2. pada design form, pemilihan untuk menggambar diwakili oleh tool apa?
    3. mengapa variabel diffx dan diffy tidak digunakan untuk menggambar line?
    untuk jawabannya saya ucapkan terima kasih.

    Reply

  4. halo mas aria :) saya akan coba jawab pertanyaannya
    1) variabel drawIndex digunakan untuk mengecek bentuk (shape) apa yang akan digambar line, elipse, atau rec
    2)Untuk tools hanya menggunakan tombol biasa mas, trus buat image untuk jadi imagenya :)
    3)diffX dan diffY digunakan untuk mengetahui jarak antar titik ketika menggambar rec dan ellipse

    mungkin klo mas tertarik saya bisa kasi source nya, ada alamat email mas?

    Reply

  16. Mas..saya lagi dapet tugas grafika tentang membuat aplikasi paint gtu..
    Tapi untuk icon nya ditambahi segi genap, seperti segi 6/segi 8 begitu. Kalo boleh tlg bantu mas..
    Kalo boleh minta source yg di atas y mas buat referensi..
    Makacih

    Reply

  17. Mas…kebetulan aq dapet tugas grafika tentang membuat aplikasi paint gtu, tapi untuk iconnya selain lingkaran dan persegi ditambahi pula segi genap seperti segi enam atau segi delapan…Bisa bantu gak mas?
    O y..kalo boleh minta source code yang di atas dunk mas, buat referensi gtu?terimakasih sebelumnya:)

    Reply

  20. Mas… Ada Tutorial pembuatan Formx ,
    Itukan diberi contoh Scripnya..
    berikan juga dong untuk tata cara pembuatan formnya sekaligus penempatan script.
    kalo bisa kirim ndk email mas.. hehe
    trims sebelumnya untuk postinganya mengenai pembuatan aplikasi paint..

    Reply

    1. Mas… Ada Tutorial pembuatan Formx ,
      Itukan diberi contoh Scripnya..
      berikan juga dong untuk tata cara pembuatan formnya sekaligus penempatan script.
      kalo bisa kirim ndk email mas.. hehe
      trims sebelumnya untuk postinganya mengenai pembuatan aplikasi paint..
      Ini Mas EmailQ : taufiq_boy88@yahoo.co.id

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s